import {
    Form,
    Input,
    Button,
    Col,
    Row,
    Space,
    DatePicker,
    Select,
    InputNumber,
    type DatePickerProps,
} from 'antd'
import { SaveOutlined } from '@ant-design/icons'
import commonStyles from '../../../../../../Utils/Common.less'
import type {
    CorporateOfficerView,
    officerAddShareholderCorporateDetails,
} from '../../../../../../Types/Client/RegisteredClients/Corporate'
import React, { useEffect, useState } from 'react'
import dayjs from 'dayjs'
import ActivePremission from '../../../../../../Utils/premissins'
import { PermissionType } from '../../../../../../Types/Enum/PermissionType'
// import { CorporateOfficerViewDefalutData } from './Officer'

const CorporateAddShreholderForm = (
    props: officerAddShareholderCorporateDetails & { companyNumber: string }
): React.ReactElement => {
    const { onSave, member, companyNumber } = props
    const [form] = Form.useForm()
    const [selectedDateAp, setSelectedDateAp] = useState<string>('')
    useEffect(() => {
        form.setFieldValue('dateofAppointment', selectedDateAp)
    }, [selectedDateAp])

    const onChangeDateAppoint = (
        dateofAppointment: DatePickerProps['value'],
        dateString: string | string[]
    ): void => {
        if (dateofAppointment != null) {
            const isoDate = dateofAppointment.toISOString()
            setSelectedDateAp(isoDate)
        }
    }
    useEffect(() => {
        if (member !== null) {
            form.resetFields()
            form.setFieldsValue({
                titleOrCompanyName: member?.titleOrCompanyName,
                dateofAppointment: member?.dateofAppointment,
            })
        }
    }, [member, form])

    const resetForm = (): void => {
        //  form.setFieldsValue(CorporateOfficerViewDefalutData)
    }

    const customizeRequiredMark = (
        label: React.ReactNode,
        { required }: { required: boolean }
    ): React.ReactElement => (
        <>
            {label}
            &nbsp;
            {required && <span className={commonStyles.requireIcon}>*</span>}
        </>
    )
    return (
        <div className={commonStyles.formWrapper}>
            <Form
                name="complex-form"
                labelCol={{ span: 24 }}
                wrapperCol={{ span: 24 }}
                initialValues={{ remember: true }}
                layout={'vertical'}
                autoComplete="off"
                onFinish={(data) => {
                    onSave(data, resetForm)
                }}
                form={form}
                requiredMark={customizeRequiredMark}
            >
                <Form.Item<CorporateOfficerView>
                    name="isNewShareHolder"
                    hidden={true}
                >
                    <Input />
                </Form.Item>
                <Row gutter={16} className={commonStyles.officerButtonMargin}>
                    <Col span={12}>
                        <Form.Item<CorporateOfficerView>
                            label="Company Name "
                            name="titleOrCompanyName"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input Company Name!',
                                },
                            ]}
                        >
                            <Input
                                disabled={
                                    member?.titleOrCompanyName !== undefined
                                }
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item<CorporateOfficerView>
                            label="Shareholding Percentage "
                            name="shareHoldingPercentage"
                            rules={[
                                {
                                    required: true,
                                    message:
                                        'Please input Shareholding Percentage!',
                                },
                            ]}
                        >
                            <InputNumber className={commonStyles.InputNumber} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16} className={commonStyles.officerButtonMargin}>
                    <Col span={12}>
                        <Form.Item<CorporateOfficerView>
                            label="Company Number"
                            name="companyNumber"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input Company Number!',
                                },
                            ]}
                        >
                            <Input
                                value={companyNumber ?? ''}
                                disabled={
                                    member?.titleOrCompanyName !== undefined
                                }
                                defaultValue=""
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item<CorporateOfficerView>
                            label="Number of Shares"
                            name="noOfShares"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input Number of Shares!',
                                },
                            ]}
                        >
                            <InputNumber className={commonStyles.InputNumber} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16} className={commonStyles.officerButtonMargin}>
                    <Col span={12}>
                        <Form.Item<CorporateOfficerView>
                            label="Date Of Appointment"
                            name="dateofAppointment"
                        >
                            <Space direction="vertical" size={12}>
                                <DatePicker
                                    className={commonStyles.dateWidth}
                                    disabled={
                                        member?.titleOrCompanyName !== undefined
                                    }
                                    onChange={(date, dateString) => {
                                        onChangeDateAppoint(date, dateString)
                                    }}
                                    value={
                                        member !== null
                                            ? dayjs(member?.dateofAppointment)
                                            : null
                                    }
                                    format="M/D/YYYY"
                                />
                            </Space>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item<CorporateOfficerView>
                            label="Shareholder Type"
                            name="shareHolderTypeId"
                        >
                            <Select
                                showSearch
                                allowClear
                                placeholder="Please select"
                                onChange={() => {}}
                                defaultValue={1}
                                optionFilterProp="children"
                            >
                                <Select.Option value={1}>
                                    Ordinary
                                </Select.Option>
                                <Select.Option value={2}>
                                    Preference
                                </Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                {ActivePremission('3000', PermissionType.SAVE) ? (
                    <Row gutter={16}>
                        <Col offset={22} span={2}>
                            <Button type="primary" htmlType="submit">
                                <SaveOutlined />
                            </Button>
                        </Col>
                    </Row>
                ) : (
                    <></>
                )}
            </Form>
        </div>
    )
}

export default CorporateAddShreholderForm
