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';

const INPUT_DEBOUNCE_MS = 400;

const ShowsSettings = ({
  sectionPath,
  title,
  onSubmit,
}: {
  sectionPath: string;
  title: string;
  onSubmit: () => void;
}) => {
  const { t } = useI18n();
  const { updateLayoutSection } = useEditActions();

  return (
    <Form
      onSubmit={useCallback(async () => {
        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,
              },
            });
          }, [])}
        />
      </InputLabel>
    </Form>
  );
};

export default ShowsSettings;