import { useCallback } from 'react';

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

const INPUT_DEBOUNCE_MS = 400;

const ReleasesSectionSettings = ({
  sectionPath,
  title,
  onSubmit,
  pagePeeking,
}: {
  sectionPath: string;
  title: string;
  pagePeeking: boolean | undefined;
  onSubmit: () => void;
}) => {
  const { updateLayoutSection } = useEditActions();
  const { t } = useI18n();

  return (
    <Form
      onSubmit={useCallback(async () => {
        // don't call submit until we know the layout has been updated after debounce
        await wait(INPUT_DEBOUNCE_MS);

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

                changedProps: {
                  title: value,
                },
              });
            },
            [updateLayoutSection]
          )}
        />
      </InputLabel>
      <PagePeekingSwitchSetting
        defaultValue={pagePeeking}
        onChange={useCallback(
          (value) => {
            updateLayoutSection({
              sectionPath,

              changedProps: {
                pagePeeking: value,
              },
            });
          },
          [updateLayoutSection]
        )}
      />
    </Form>
  );
};

export default ReleasesSectionSettings;