import { ItemTypes } from '@theorchard/songwhip-api';

import type { PageTitleSectionProps } 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 { useItemContext } from '../../../ItemPageContext';

interface SettingsProps extends PageTitleSectionProps {
  sectionPath: string;
  artistsContext: { artistIds: number[]; artistNames: string };
  onSubmit(): void;
}

export const Settings = ({
  sectionPath,
  artistsContext: { artistNames },
  onSubmit,

  // section props
  customArtistNames,
  withArtistLinks,
  isArtistNamesHidden,
}: SettingsProps) => {
  const { t } = useI18n('itemEdit');
  const { data } = useItemContext();
  const { updateLayoutSection } = useEditActions();

  const showArtistNamesSettings = data.item.type !== ItemTypes.ARTIST;
  const isArtistLinksDisabled = Boolean(customArtistNames);

  return (
    <Form flexColumn gap="1.8rem" onSubmit={onSubmit}>
      <InputLabel
        value={t('pageTitleSection.edit.artistNamesLabel')}
        description={t('pageTitleSection.edit.artistNamesDescription')}
      >
        <TextInput
          testId="artistNamesInput"
          maxLength={255}
          defaultValue={customArtistNames || artistNames}
          placeholder={t('pageTitleSection.edit.artistNamesPlaceholder')}
          onInputEnd={({ value }) => {
            updateLayoutSection({
              sectionPath,

              changedProps: {
                customArtistNames: value || undefined,
              },
            });
          }}
          onBlur={({ target }) => {
            const { value } = target;

            if (!value) {
              target.value = artistNames;
            }
          }}
        />
      </InputLabel>
      {showArtistNamesSettings && (
        <>
          <SwitchSetting
            testId="withArtistLinksSwitch"
            title={t('pageTitleSection.edit.artistLinksLabel')}
            description={t('pageTitleSection.edit.artistLinksDescription')}
            value={withArtistLinks}
            isDisabled={isArtistLinksDisabled}
            disabledDescription={t(
              'pageTitleSection.edit.artistLinksDisabledDescription'
            )}
            onChange={(value) => {
              updateLayoutSection({
                sectionPath,

                changedProps: {
                  withArtistLinks: value,
                },
              });
            }}
          />
          <SwitchSetting
            testId="isArtistNamesHiddenSwitch"
            title={t('pageTitleSection.edit.artistNamesHiddenLabel')}
            value={isArtistNamesHidden}
            onChange={(value) => {
              updateLayoutSection({
                sectionPath,

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