import React, { type ReactElement } from 'react'
import { Form, Select, Input } from 'antd'
import { connect } from 'react-redux'
import {
    type PartneshipInitialDetailsInterface,
    type PartneshipHomeFormDataInterface,
    type initialState,
} from '../../../../../../Types/Client/RegisteredClients/Partnership'

const InitialDetailsForm = (
    props: PartneshipInitialDetailsInterface
): ReactElement => {
    const { categoryDropDownList, partneshipTaps, onCategorySelect } = props
    return (
        <>
            <Form.Item<PartneshipHomeFormDataInterface>
                name="partnershipId"
                hidden={true}
            >
                <Input />
            </Form.Item>
            <Form.Item<PartneshipHomeFormDataInterface>
                name="clientNumber"
                hidden={true}
            >
                <Input />
            </Form.Item>
            <Form.Item<PartneshipHomeFormDataInterface>
                label="Client Category"
                name="clientCategoryId"
            >
                <Select
                    allowClear
                    showSearch
                    onChange={(value) => {
                        onCategorySelect(value)
                    }}
                    filterOption={(input, option) =>
                        option?.label
                            ?.toLowerCase()
                            .includes(input.toLowerCase()) ?? false
                    }
                    options={categoryDropDownList}
                />
            </Form.Item>

            <Form.Item<PartneshipHomeFormDataInterface>
                label="Trading Name"
                name="tradingName"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Trading Name',
                    },
                ]}
                initialValue={
                    partneshipTaps?.partnershipInitialDetails?.tradingName
                }
            >
                <Input />
            </Form.Item>

            <Form.Item<PartneshipHomeFormDataInterface>
                label="Partnership UTR"
                name="partnershipUTR"
            >
                <Input />
            </Form.Item>
        </>
    )
}

const mapStateToProps = (state: any): initialState => {
    return {
        categoryDropDownList: state.initial.categoryDropDownList,
    }
}

export default connect(mapStateToProps)(InitialDetailsForm)
