import { useMemo, useState } from 'react';

import type { FC } from 'react';
import type { DesktopTwoColumnLayoutProps } from '../types';

import Box from '~/src/components/Box';
import DesktopTwoColumnLayout from '..';
import ChangeImageButton from '../../../ItemPageEdit/components/ChangeImageButton';
import RemoveImageButton from '../../../ItemPageEdit/components/RemoveImageButton';
import LayoutImageSettingsDialog from '../../components/LayoutImageSettingsDialog';
import MobileSingleColumnImageSettings from '../../MobileSingleColumnLayout/MobileSingleColumnLayoutEdit/MobileSingleColumnImageSettings';
import DesktopTwoColumnImageSettings from './DesktopTwoColumnImageSettings';

interface DesktopTwoColumnLayoutEditProps extends DesktopTwoColumnLayoutProps {}

export const DesktopTwoColumnLayoutEdit: FC<
  DesktopTwoColumnLayoutEditProps
> = ({ ...props }) => {
  const [dialogOpen, setDialogOpen] = useState(false);
  const hasImage = Boolean(props.image.url);

  return (
    <>
      <DesktopTwoColumnLayout
        {...props}
        secondaryContent={useMemo(
          () => (
            <Box
              style={{
                display: 'grid',
                gridTemplateColumns: '1fr auto 1fr',
                alignItems: 'center',
                columnGap: '0.6rem',
              }}
            >
              <span />
              <ChangeImageButton
                height="6rem"
                onClick={() => setDialogOpen(true)}
              />
              <Box style={{ justifySelf: 'start' }}>
                {hasImage && <RemoveImageButton />}
              </Box>
            </Box>
          ),
          [hasImage]
        )}
      />
      {dialogOpen && (
        <LayoutImageSettingsDialog
          onClose={() => setDialogOpen(false)}
          initialSelectedTab="desktop"
          desktopImageSettings={<DesktopTwoColumnImageSettings />}
          mobileImageSettings={<MobileSingleColumnImageSettings />}
        />
      )}
    </>
  );
};