import { useCallback, useRef, useState } from 'react';
import Debug from 'debug';

import type { DialogBoxApi, DialogBoxProps } from '~/src/components/DialogBox';
import type { FC } from 'react';
import type { PresaveButtonsItem } from '../types';

import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import DialogBox from '~/src/components/DialogBox';
import { DialogBoxHeader } from '~/src/components/DialogBox/DialogBoxHeader';
import Text from '~/src/components/Text';
import TextInput from '~/src/components/TextInput';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import useTheme from '~/src/hooks/useTheme';
import getServiceDisplayData from '~/src/lib/getServiceDisplayData';
import { useI18n } from '~/src/lib/i18n';

const debug = Debug('songwhip/EditPresaveItemDialogBox');

interface EditPresaveItemDialogBoxProps
  extends Omit<DialogBoxProps, 'renderContent'> {
  onSubmit: (params: PresaveButtonsItem) => void;
  onDelete: (params: PresaveButtonsItem) => void;
  item: PresaveButtonsItem;
}

export const EditPresaveItemDialogBox: FC<EditPresaveItemDialogBoxProps> = ({
  onDelete,
  onSubmit,
  onClose,
  item,
}) => {
  const dialogBoxRef = useRef<DialogBoxApi>(null);
  const close = () => dialogBoxRef.current?.close();
  const isLargeScreen = useIsLargeScreen();
  const [textState, setTextState] = useState(item.text);
  const serviceName = getServiceDisplayData(item.type)!.name;
  const theme = useTheme();
  const { t } = useI18n();

  return (
    <DialogBox
      apiRef={dialogBoxRef}
      fillViewport={!isLargeScreen}
      onClose={onClose}
      renderHeader={useCallback(
        () => (
          <DialogBoxHeader
            title={t('itemEdit.labels.changeButtonText')}
            onBackClick={close}
            renderRight={({ textProps }) => (
              <Clickable
                // isDisabled={!isValid}
                onClick={async () => {
                  await close();

                  onSubmit({
                    ...item,
                    text: textState,
                  });
                }}
              >
                <Text {...textProps}>{t('app.actions.done')}</Text>
              </Clickable>
            )}
          />
        ),
        [textState]
      )}
      renderContent={useCallback(() => {
        return (
          <Box padding="0 16">
            <TextInput
              placeholder={serviceName}
              value={textState}
              onChange={({ value }) => {
                setTextState(value);
              }}
            />
            <Clickable
              margin="1.8rem auto 1.8rem 0"
              onClick={async () => {
                debug('delete click');

                await close();
                debug('closed');

                onDelete(item);
              }}
            >
              <Text color={theme.colorDanger} size="1.5rem">
                {t('itemEdit.actions.removeButton')}
              </Text>
            </Clickable>
          </Box>
        );
      }, [textState])}
    />
  );
};