tabbit

Tue Aug 26 2025
Copied to clipboard! Copy reply
'use client';

import { useMemo, useRef, useState } from 'react';
import { Button, Input } from 'react-aria-components';
import { Controller, useController, useForm, useFieldArray } from 'react-hook-form';
import classNames from 'classnames';
import { useTranslations } from 'next-intl';

import Card from '@/app/components/Card/Card';
import SingleSelect from '@/app/components/forms/SingleSelect/SingleSelect';
import InlineLoading from '@/app/components/loading/InlineLoading';
import { Toggle } from '@/app/components/Toggle/Toggle';
import { SettingsFormValues } from '@/types/forms';
import { filterOptionsBySearchTerm } from '@/utils/stringUtils';

import styles from './Settings.module.scss';

export default function SettingsPage() {
  const [isFormLoading, setisFormLoading] = useState(false);
  const [timezoneSearchTerm, setTimezoneSearchTerm] = useState<string | null>(
    null,
  );
  const t = useTranslations('pages.OrganizationSettings.form');
  const errorStrings = useTranslations(
    'pages.OrganizationSettings.form-errors',
  );

  const timezoneOptions = useMemo(() => {
    const timezones = Intl.supportedValuesOf('timeZone');
    timezones.unshift('Etc/UTC');
    return filterOptionsBySearchTerm(
      timezones.map(tz => ({
        id: tz,
        name: tz === 'Etc/UTC' ? '(UTC+00:00) London' : tz.replace(/_/g, ' '),
      })),
      timezoneSearchTerm,
    );
  }, [timezoneSearchTerm]);

  const formRef = useRef(null);


  async function fetchData() {
    function delay(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
    delay(4000)
    const requestValues: SettingsFormValues = {
      timezone: 'Etc/UTC',
      customUserFields: [{ name: 'field1', value: 'f1' }, { name: 'field2', value: 'f2' }, { name: 'field3', value: 'f3' }],
      allowSkipPlacementTest: false,
      proficientyTestFields: [{ days: 2 }, { days: 5 }, { days: 3 }, { days: 89 }],
    };
    return requestValues
  }


  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: async () => await fetchData()
  });


  //const { field } = useController({ name: 'test' });

  const onSubmit = async (data: SettingsFormValues) => {
    try {
      setisFormLoading(true);
      console.log(data);
      setisFormLoading(false);
      // TODO send to server
    } catch (err: any) {
      setisFormLoading(false);
      console.log(err);
    }
  };



  const { fields: customUserFields } = useFieldArray({ control, name: 'customUserFields' })
  const { fields: proficientyTestFields } = useFieldArray({ control, name: 'proficientyTestFields' })

  return (
    <section className={styles.body}>
      <form onSubmit={handleSubmit(onSubmit)}>

        <Card>
          <section className={styles['inner-card']}>
            <div>
              <p className={styles['card-title']}>{t('general-header')}</p>
            </div>
            <div className={styles['widget-text-bar']}></div>

            <div className={styles.input}>
              <label>{t('timezone-label')}</label>
              <Controller
                control={control}
                disabled={false}
                render={({ field }) => (
                  <SingleSelect
                    className={styles.dropdown}
                    disabled={false}
                    label={t('timezone-input-label')}
                    isLabelVisible={false}
                    options={timezoneOptions}
                    selectedOptionId={field.value}
                    setSelectedId={(selection: string[]) => {
                      field.onChange(selection[0] ?? 'UTC');
                    }}
                    dropdownArrowClassName={styles['caret']}
                    closeOnSelection={true}
                    searchable={true}
                    setSearchTerm={setTimezoneSearchTerm}
                    containerRef={formRef}
                  />
                )}
                name="timezone"
              />
              {errors.timezone && (
                <p className={styles['input-error-msg']}>{errorStrings('invalid-timezone')}</p>
              )}
            </div>
          </section>


          {/************ Custom User Fields ***********/}
          <section className={styles['inner-card']}>
            <div>
              <p className={styles['card-title']}>
                {t('custom-user-fields-header')}
              </p>
            </div>
            <div className={styles['widget-text-bar']}></div>
            <p className={styles['card-subtitle']}>
              {t('custom-user-fields-subheader')}
            </p>
            {
              customUserFields.map((field: any, i: number) =>
                <div className={styles.input} key={field.id}>
                  <label>{`${t('custom-user-field-label')} ${i + 1}`}</label>
                  <Input
                    aria-label={`${t('custom-user-field-label')} ${i}`}
                    type="text"
                    key={field.id}
                    {...register(`customUserFields.${i}.value`, { maxLength: 5 })}
                    className={styles['input-box']}
                  />
                  {errors.customUserFields?.[i] && <p>This cant be more than 5 chars</p>}
                </div>
              )
            }
          </section>


          {/************ Proficiency / Assessments Tests  ***********/}
          <section className={styles['inner-card']}>
            <div>
              <p className={styles['card-title']}>
                {t('assessment-tests-header')}
              </p>
            </div>
            <div className={styles['widget-text-bar']}></div>
            <p className={styles['card-subtitle']}>
              {t('assessment-tests-subheader')}
            </p>

            <div className={classNames(styles.input, styles.row)}>
              <Controller
                control={control}
                render={({ field: { onChange, value } }) => (
                  <Toggle
                    disabled={false}
                    id="allow-skip-placement-test"
                    name="allowSkipPlacementTest"
                    title={t('allow-skip-placement-test-label')}
                    selected={Boolean(value)}
                    onChange={onChange}
                    className={styles['label-text']}
                  />
                )}
                name="allowSkipPlacementTest"
              />
            </div>

            {
              proficientyTestFields.map((field: any, i: number) =>
                <div className={styles.input} key={field.id}>
                  <label>Proficiency test {i} interval</label>
                  <Input
                    aria-label={`Proficiency test ${i} interval`}
                    type="text"
                    key={field.id}
                    {...register(`proficientyTestFields.${i}.days`, { required: "yes!" })}
                    className={styles['input-box']}
                  />
                  <span>{t('days')}</span>
                  {errors.proficientyTestFields?.[i] && <p className={styles['input-error-msg']}>
                    {errorStrings('numeric')}
                  </p>}
                </div>
              )
            }


          </section>

          <div className={styles['form-footer']}>
            <Button type="submit" className={styles['save-button']}>
              {isFormLoading ? <InlineLoading /> : 'Save'}
            </Button>
          </div>
        </Card>
      </form>
    </section>
  );
}