import React, { type ReactElement } from 'react'
import { Col, Form, Input, Row, Select, Switch } from 'antd'
import { connect } from 'react-redux'
import {
    type HomeStateProps,
    type PartneshipRegisterAddress,
} from '../../../../../../Types/Client/RegisteredClients/Partnership'
import commonStyles from '../../../../../../Utils/Common.less'

const CorresponseAddressForm = (
    props: PartneshipRegisterAddress
): ReactElement => {
    const { countryList, edit, toggleCorrBussEditing } = props

    return (
        <>
            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <div className={commonStyles.bussinessToggle}>
                        <Switch
                            size="small"
                            checked={edit}
                            onChange={toggleCorrBussEditing}
                        />
                        <span className={commonStyles.bussinesToggleA}>
                            Same as Business
                        </span>
                    </div>
                </Col>
            </Row>

            <Form.Item
                label="Address 1"
                name="corraddress1"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Address One',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item label="Address 2" name="corraddress2">
                <Input />
            </Form.Item>
            <Form.Item
                label="Town"
                name="corrtown"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Town',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item label="Country" name="corrcountry">
                <Select
                    allowClear
                    showSearch
                    placeholder="Please select"
                    onChange={() => {}}
                    options={countryList?.map((country) => ({
                        value: country.label,
                        label: country.label,
                    }))}
                />
            </Form.Item>
            <Form.Item
                label="Post Code"
                name="corrpostcode"
                rules={[
                    {
                        required: true,
                        message: 'Please input your PostCode!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
        </>
    )
}

const mapStateToProps = (state: any): HomeStateProps => {
    return {
        categoryDropDownList: state.initial.categoryDropDownList,
        countryList: state.common.countryList,
        partnershipTaps: state.client.partnershipTaps,
    }
}

export default connect(mapStateToProps)(CorresponseAddressForm)