'use client';
import React, { useCallback } from 'react';
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/navigation';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form } from 'react-compose-form';
import { FormSubmit } from '@/components/form/form-submit';
import { FormReset } from '@/components/form/form-reset';
import { InputControl } from '@/components/form/control/input.control';
import { TextareaControl } from '@/components/form/control/textarea.control';
import { api } from '@/lib/trpc/client';
import type { AppRouterOutput } from '@/lib/trpc/router';
import { PollValidator } from '@/server/modules/poll/validators/poll.validator';
import { PollQuestionCollection } from '@/components/form/control/poll-question.collection';
import { Routes } from '@/config/routes';
import Link from "next/link";

type Poll = NonNullable<AppRouterOutput['poll']['get']>;

type Props =
  | {
      mode: 'create';
      data?: undefined;
    }
  | {
      mode: 'edit';
      data: Poll;
    };

export const PollEditor: React.FC<Props> = (props) => {
  const { mode, data: poll } = props;

  const router = useRouter();

  const form = useForm({
    resolver: zodResolver(PollValidator),
    values: poll as z.infer<typeof PollValidator>
  });

  const createMutation = api.poll.create.useMutation({
    onSuccess(poll) {
      router.replace(Routes.DASHBOARD.POLL_EDIT.replace('[id]', poll.id));
    }
  });

  const updateMutation = api.poll.update.useMutation({
    onSuccess(poll) {
      form.reset(poll as z.infer<typeof PollValidator>);
    }
  });

  const handleSubmit = useCallback(
    async (data: z.infer<typeof PollValidator>) => {
      switch (mode) {
        case 'create':
          await createMutation.mutateAsync(data);
          break;

        case 'edit':
          await updateMutation.mutateAsync({
            id: poll.id,
            data
          });
          break;
      }
    },
    [mode, poll, createMutation, updateMutation]
  );

  return (
    <Form
      formControl={form}
      resolver={zodResolver(PollValidator)}
      onSubmit={handleSubmit}
    >
      <div className='max-w-4xl flex-1'>
        <div className='flex flex-col gap-4 px-4'>
          <InputControl label='Title' name='title' />

          <TextareaControl label='Description' name='description' />

          <PollQuestionCollection label='Questions' name='questions' />
        </div>

        <div className='flex justify-between px-4 pt-5'>
          <div className='flex gap-2'>
            {mode === 'edit' && (
              <FormReset asChild>
                <Link href='.'>Cancel</Link>
              </FormReset>
            )}

            <FormSubmit>
              {mode === 'create' ? 'Create Poll' : 'Update Poll'}
            </FormSubmit>
          </div>
        </div>
      </div>
    </Form>
  );
};