import { useCallback } from 'react';

import type { PresaveButtonsProps } from '../types';

import Form from '~/src/components/Form';
import InputLabel from '~/src/components/InputLabel';
import { useEditActions } from '~/src/components/ItemPage/ItemPageEdit/useEditActions';
import SwitchSetting from '~/src/components/Switch/SwitchSetting';
import TextInput from '~/src/components/TextInput';
import { useI18n } from '~/src/lib/i18n';
import wait from '~/src/lib/utils/wait';

interface SettingsContentProps extends Omit<PresaveButtonsProps, 'items'> {
  sectionPath: string;
  onSubmit: () => void;
}

const INPUT_DEBOUNCE_MS = 400;

const PresaveButtonsSettings = ({
  sectionPath,
  withColoredIcons,
  title,
  onSubmit,
}: SettingsContentProps) => {
  const { updateLayoutSection } = useEditActions();
  const { t } = useI18n();

  return (
    <Form
      onSubmit={useCallback(async () => {
        await wait(INPUT_DEBOUNCE_MS);
        onSubmit();
      }, [])}
    >
      <InputLabel value={t('itemEdit.labels.componentTitle')}>
        <TextInput
          value={title}
          debounceTimeout={INPUT_DEBOUNCE_MS}
          onInputEnd={({ value }) => {
            updateLayoutSection({
              sectionPath,

              changedProps: {
                title: value,
              },
            });
          }}
        />
      </InputLabel>
      <SwitchSetting
        flexRow
        margin="2.4rem 0 0"
        title={t('itemEdit.labels.coloredIcons')}
        description={t('itemEdit.coloredIconsHelp')}
        value={!!withColoredIcons}
        onChange={(value) => {
          updateLayoutSection({
            sectionPath,

            changedProps: {
              withColoredIcons: value,
            },
          });
        }}
      />
    </Form>
  );
};

export default PresaveButtonsSettings;