import { useBanContext } from '@components/user/ban-user-dialog';
import { useAppForm } from '@hooks/use-app-form';
import { m } from '@paraglide/messages';
import { WarningIcon } from '@phosphor-icons/react';
import { userBanSchema } from '@service/user.schema';
import { Alert, AlertDescription, AlertTitle } from '@ui/alert';
import { Button } from '@ui/button';
import { DialogClose, DialogFooter } from '@ui/dialog';
import { Field, FieldGroup } from '@ui/field';
import { UserWithRole } from 'better-auth/plugins';

type FormProps = {
  data: UserWithRole;
};

const BanUserForm = ({ data }: FormProps) => {
  const { setSubmitData, setOpen, setOpenConfirm } = useBanContext();

  const form = useAppForm({
    defaultValues: {
      id: data.id,
      banReason: '',
      banExp: 0,
    },
    validators: {
      onChange: userBanSchema,
      onSubmit: userBanSchema,
    },
    onSubmit: async ({ value }) => {
      setSubmitData(value);
      setOpen(false);
      setTimeout(() => {
        setOpenConfirm(true);
      }, 100);
    },
  });

  return (
    <form
      id="admin-ban-user-form"
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <FieldGroup>
        <Alert variant="destructive">
          <WarningIcon />
          <AlertTitle>
            {m.profile_form_name()}: {data.name}
          </AlertTitle>
          <AlertDescription className="sr-only">{data.name}</AlertDescription>
        </Alert>
        <form.AppField name="id">
          {(field) => <field.HiddenField />}
        </form.AppField>
        <form.AppField name="banReason">
          {(field) => (
            <field.TextArea label={m.users_page_ui_form_ban_reason()} />
          )}
        </form.AppField>
        <form.AppField name="banExp">
          {(field) => (
            <field.SelectNumber
              label={m.users_page_ui_form_ban_exp()}
              values={[
                { label: m.exp_time({ time: '1' }), value: '1' },
                { label: m.exp_time({ time: '7' }), value: '7' },
                { label: m.exp_time({ time: '15' }), value: '15' },
                { label: m.exp_time({ time: '30' }), value: '30' },
                { label: m.exp_time({ time: '180' }), value: '180' },
                { label: m.exp_time({ time: '365' }), value: '365' },
                { label: m.exp_time({ time: '99999' }), value: '99999' },
              ]}
              placeholder={m.users_page_ui_select_placeholder_ban_exp()}
            />
          )}
        </form.AppField>
        <Field>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline" type="button">
                {m.ui_cancel_btn()}
              </Button>
            </DialogClose>
            <form.AppForm>
              <form.SubscribeButton
                label={m.ui_ban_btn()}
                variant="destructive"
              />
            </form.AppForm>
          </DialogFooter>
        </Field>
      </FieldGroup>
    </form>
  );
};

export default BanUserForm;
