import { useMemo, useState } from 'react';

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

import Box from '~/src/components/Box';
import DesktopSingleColumnLayout 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 DesktopSingleColumnImageSettings from './DesktopSingleColumnImageSettings';

interface MobileSingleColumnLayoutEditProps
  extends DesktopSingleColumnLayoutProps {}

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

  return (
    <>
      <DesktopSingleColumnLayout
        {...props}
        beforeContent={useMemo(() => {
          const noSpaceAboveContent =
            props.image.layout.spaceAboveContent === 'none';
          const marginTop = noSpaceAboveContent ? '5rem' : '5rem';

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