import type { FC } from 'react';
import React from 'react';
import { Form, Button } from '@theorchard/suite-components';
import { Controller, useForm } from 'react-hook-form';
import AccountSearchDropdown from 'src/components/accountSearchDropdown';
import { CLASSNAME_FORM } from './constants';
import type { FormFields } from './constants';

interface Props {
    onSubmit: (data: FormFields) => void;
}

const CreateForm: FC<Props> = ({ onSubmit }) => {
    const { register, handleSubmit, control } = useForm<FormFields>();

    return (
        <Form onSubmit={handleSubmit(onSubmit)} className={CLASSNAME_FORM}>
            <Controller
                control={control}
                name="vendorId"
                render={({ field: { onChange, value } }) => (
                    <AccountSearchDropdown
                        accountId={value}
                        onChange={data => onChange(data?.id)}
                        placeholder="Account Name"
                    />
                )}
            />
            <Form.Control
                type="text"
                {...register('forename')}
                placeholder="First name"
            />
            <Form.Control
                type="text"
                {...register('middleNames')}
                placeholder="Middle name"
            />
            <Form.Control
                type="text"
                {...register('surname')}
                placeholder="Last name"
            />
            <Button type="submit" variant="primary">
                Create
            </Button>
        </Form>
    );
};

export default CreateForm;