import EmailSettingsForm from '@/components/admin/site-settings/email-setting.form';
import PageHeading from '@/components/common/page-heading';
import LoaderIcon from '@/components/icons/loader-icon';
import { useApiSWR } from '@/hooks/useSWR';
import { FormFieldType } from '@/types/form-field-type';
import { useTranslation } from 'react-i18next';

const EMAIL_KEYS = [
  'mail_driver',
  'smtp_host',
  'smtp_port',
  'smtp_username',
  'smtp_password',
  'smtp_encryption',
  'smtp_from_address',
  'smtp_from_name',
];

const EmailSettings = () => {
  const { t } = useTranslation();
  const { data, isLoading } = useApiSWR<FormFieldType[]>('/admin/settings');

  const site = data?.filter((s) => EMAIL_KEYS.includes(s.key));

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const defaultValues = site?.reduce((acc: any, cur: FormFieldType) => {
    if (cur.type === 'boolean') acc[cur.key] = cur.value === '1';
    else acc[cur.key] = cur.value;
    return acc;
  }, {});

  if (isLoading)
    return (
      <div className="flex h-96 w-full items-center justify-center gap-2">
        <LoaderIcon />
        {t('Loading...')}
      </div>
    );

  return (
    <>
      <PageHeading
        title={t('Email Settings')}
        description={t('Configure your SMTP server for outgoing emails.')}
      />

      <EmailSettingsForm site={site ?? []} defaultValues={defaultValues} />
    </>
  );
};

EmailSettings.title = 'Email Settings';

export default EmailSettings;