import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { ReactNode } from 'react';

import { FocusedObjectContext } from '@/app/(root)/create/v2/useFocusedObject';
import { useContextSelector } from '@/hooks/useContextSelector';
import { CloseIcon, ExtendRightIcon } from '@/icons';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import StudioContext from '../studio/StudioContext';
import { Padding, Wrapper } from './common';

const Foreground = styled.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 16px;
  position: relative;
  z-index: 1;
  gap: 16px;
  flex-grow: 1;
`;

const FixedFooter = styled.div`
  position: absolute;
  padding: 12px 16px;
  border-radius: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  border-top: 1px solid var(--color-border-primary);
  background-color: var(--color-background-primary);
  z-index: 1;
  max-height: 240px;

  .hovered-text {
    display: none;
  }
  .default-text {
    display: inline;
  }

  &:hover {
    .hovered-text {
      display: inline;
    }
    .default-text {
      display: none;
    }
  }
`;

const CloseButton = observer(function CloseButton({
  onCollapse,
  closable = true,
  tightMargin = false,
}: {
  onCollapse?: () => void;
  closable?: boolean;
  tightMargin?: boolean;
}) {
  const setFocusedObject = useContextSelector(
    FocusedObjectContext,
    (ctx) => ctx.setFocusedObject
  );

  if (!closable) return null;

  return (
    <Button
      variant={ButtonVariant.Secondary}
      icon={
        onCollapse ? (
          <ExtendRightIcon className='m-1 h-4 w-4' />
        ) : (
          <CloseIcon className='h-5 w-5' />
        )
      }
      shape={ButtonShape.Pill}
      className={`absolute z-10 ${tightMargin ? 'top-1 right-1' : 'top-3 right-3'}`}
      onClick={onCollapse ? onCollapse : () => setFocusedObject(undefined)}
    />
  );
});

// Base layout component that handles common structure
export default observer(function BaseLayout({
  children,
  footer,
  onCollapse,
  closable = true,
  border = false,
  backgroundImage,
  header,
  tightMargin = false,
}: {
  children: ReactNode;
  footer?: ReactNode;
  onCollapse?: () => void;
  closable?: boolean;
  border?: boolean;
  backgroundImage?: ReactNode;
  header?: ReactNode;
  tightMargin?: boolean;
}) {
  const hasStudioContext = useContextSelector(StudioContext, (ctx) => !!ctx);

  return (
    <Padding border={border} zero={hasStudioContext}>
      <CloseButton
        onCollapse={onCollapse}
        closable={closable}
        tightMargin={tightMargin}
      />
      <Wrapper
        border={border}
        studioRounding={hasStudioContext}
        hasFooter={!!footer}
      >
        {backgroundImage}
        {header}
        <Foreground>{children}</Foreground>
      </Wrapper>
      {footer && <FixedFooter className='fixed-footer'>{footer}</FixedFooter>}
    </Padding>
  );
});