import { useCallback } from 'react';

import type { ItemPageCustomLinkObject } from '~/lib/songwhipApi/types';
import type { DialogBoxProps } from '~/src/components/DialogBox';
import type { FC } from 'react';
import type { ResolvedLink } from '../types';
import type { EditLinkFormProps } from './AddLinkDialogBox/EditLinkForm';

import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import DialogBox, {
  DIALOG_BOX_CONTENT_PADDING_X,
} from '~/src/components/DialogBox';
import { DialogBoxHeader } from '~/src/components/DialogBox/DialogBoxHeader';
import { FORM_SECTION_SPACING } from '~/src/components/Form';
import Sticky from '~/src/components/Sticky';
import Text from '~/src/components/Text';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import { useI18n } from '~/src/lib/i18n';
import { EditLinkForm } from './AddLinkDialogBox/EditLinkForm';
import RemoveButton from './RemoveButton';

export interface EditLinkDialogBoxProps
  extends Omit<DialogBoxProps, 'renderContent'>,
    Pick<
      EditLinkFormProps,
      | 'withPagePeekingSetting'
      | 'withEmailAndOptInsSetting'
      | 'initialEmailAndOptInsValue'
    > {
  onSubmit: (params: {
    dataPath: string;
    isDefault: boolean;
    customObject: ItemPageCustomLinkObject;
    withEmailAndOptIns: boolean | undefined;
  }) => void;
  onDelete: (params: { dataPath: string }) => void;
  item: ResolvedLink;
}

export const EditLinkDialogBox: FC<EditLinkDialogBoxProps> = (props) => {
  const { onClose } = props;
  const isLargeScreen = useIsLargeScreen();

  return (
    <DialogBox
      testId="editLinkDialog"
      fillViewport={!isLargeScreen}
      onClose={onClose}
      renderContent={useCallback(({ close }) => {
        return <EditLinkContent {...props} close={close} />;
      }, [])}
    />
  );
};

const EditLinkContent: FC<EditLinkDialogBoxProps & { close: () => void }> = ({
  item,
  onSubmit,
  onDelete,
  close,
  withPagePeekingSetting,
  withEmailAndOptInsSetting,
  initialEmailAndOptInsValue,
}) => {
  const { t } = useI18n();

  return (
    <Box padding={`0 ${DIALOG_BOX_CONTENT_PADDING_X} ${FORM_SECTION_SPACING}`}>
      <EditLinkForm
        // re-mount on item switch so useState fields re-init
        key={item.dataPath}
        initialLinkValue={item.link}
        initialTextValue={item.text}
        initialIconValue={item.icon}
        initialPagePeekingValue={item.pagePeeking}
        initialEmailAndOptInsValue={initialEmailAndOptInsValue}
        withPagePeekingSetting={withPagePeekingSetting}
        withEmailAndOptInsSetting={withEmailAndOptInsSetting}
        onSubmit={useCallback(
          ({ withEmailAndOptIns, ...customObjectParams }) => {
            onSubmit({
              dataPath: item.dataPath,
              isDefault: item.isDefault,
              withEmailAndOptIns,

              customObject: {
                type: 'link',
                ...customObjectParams,
              },
            });

            close();
          },
          [onSubmit]
        )}
        renderBefore={() => (
          <Sticky>
            <DialogBoxHeader
              isPadded={false}
              title={t('itemEdit.itemLinkEditHeader')}
              withShadow={false}
              onCloseClick={close}
              renderRight={({ textProps }) => (
                <Clickable isSubmit testId="done">
                  <Text {...textProps}>{t('app.actions.done')}</Text>
                </Clickable>
              )}
            />
          </Sticky>
        )}
      />
      <RemoveButton
        testId="removeButton"
        margin={`${DIALOG_BOX_CONTENT_PADDING_X} auto 0 0`}
        isInline
        text={t('itemEdit.actions.removeLink')}
        onClick={() => {
          onDelete(item);
          close();
        }}
      />
    </Box>
  );
};