import { useRef, useState } from 'react';

import type { CheckboxApi } from '~/src/components/Checkbox';
import type { FormApi } from '~/src/components/Form';
import type { CreateFlowStage } from '../components/CreateFlow/types';

import Box from '~/src/components/Box';
import Checkbox from '~/src/components/Checkbox';
import Form from '~/src/components/Form';
import InputLabel, { InputLabelValue } from '~/src/components/InputLabel';
import Text from '~/src/components/Text';
import TextInput from '~/src/components/TextInput';
import { useListenOnEvent } from '~/src/hooks/useListenOnEvent';
import { useI18n } from '~/src/lib/i18n';
import { useAppRouter } from '~/src/lib/router2';
import { toBoolean } from '~/src/lib/utils/converter';

export const ExclusiveContentStage: CreateFlowStage = ({ events }) => {
  const { t } = useI18n('exclusiveContent');
  const formRef = useRef<FormApi>(null);
  const dspCheckboxRef = useRef<CheckboxApi>(null);
  const emailCheckboxRef = useRef<CheckboxApi>(null);
  const router = useAppRouter();
  const query = router.getQuery();
  const [isDspChecked, setIsDspChecked] = useState(
    query.unlockWithDspLogin !== undefined
      ? toBoolean(query.unlockWithDspLogin)
      : true
  );
  const [isEmailChecked, setIsEmailChecked] = useState(
    toBoolean(query.unlockWithEmail)
  );

  useListenOnEvent(events, 'nextButtonPressed', () => {
    formRef.current?.submit();
  });

  return (
    <Box maxWidth="48rem" width="100%">
      <Form
        apiRef={formRef}
        onSubmit={({ values }) => events.emit('submit', values)}
        trackingId="exclusiveContentForm"
        testId="exclusiveContentForm"
        flexColumn
        gap="3rem"
      >
        <Box flexColumn gap="1rem">
          <InputLabel value={t('pageTitle')}>
            <TextInput
              autoFocus
              testId="pageTitleInput"
              height="5rem"
              required
              name="pageTitle"
              maxLength={255}
              defaultValue={query.pageTitle || ''}
              placeholder={t('pageTitlePlaceholder')}
            />
          </InputLabel>
          <Text size="1.2rem" color="gray">
            {t('pageTitleDescription')}
          </Text>
        </Box>
        <Box flexBox flexColumn gap="1rem">
          <InputLabelValue value={t('howFansCanUnlock')} />
          <Box flexBox gap="0.65rem" flexWrap>
            <Checkbox
              name="unlockWithDspLogin"
              testId="unlockWithDspLoginCheckbox"
              apiRef={dspCheckboxRef}
              title={t('withDspLogin')}
              size="large"
              isInitiallyChecked={isDspChecked}
              minWidth="21rem"
              onChange={(value) => {
                if (!value && !isEmailChecked) {
                  dspCheckboxRef.current?.check();
                  return;
                }
                setIsDspChecked(value);
              }}
            />
            <Checkbox
              name="unlockWithEmail"
              testId="unlockWithEmailCheckbox"
              apiRef={emailCheckboxRef}
              size="large"
              isInitiallyChecked={toBoolean(query.unlockWithEmail)}
              title={t('withEmailAddress')}
              onChange={(value) => {
                if (!value && !isDspChecked) {
                  emailCheckboxRef.current?.check();
                  return;
                }
                setIsEmailChecked(value);
              }}
            />
          </Box>
        </Box>
        <Box flexColumn gap="1rem">
          <InputLabel value={t('message')} isOptional>
            <TextInput
              name="message"
              testId="messageInput"
              height="5rem"
              defaultValue={query.message || ''}
              placeholder={t('messagePlaceholder')}
            />
          </InputLabel>
        </Box>
      </Form>
    </Box>
  );
};