import React, { useEffect } from 'react'
import {
    Button,
    Col,
    DatePicker,
    Form,
    Input,
    Row,
    Table,
    Tabs,
    TimePicker,
} from 'antd'
import {
    SaveHours,
    gethourssdroplist,
} from '../../../Services/Helpdesk/Backlog'
import { connect, useDispatch } from 'react-redux'

import commonStyles from '../../../Utils/Common.less'
import TabPane from 'antd/es/tabs/TabPane'
import { type hoursListStateInterface } from '../../../Types/Backlog/Backlog'
import dayjs from 'dayjs'
import { type ColumnsType } from 'antd/es/table'
import { type PermissionListType } from '../../../Types/Hr/LeavePermission'
import SearchInput from '../../../Components/SearchInput'

const EventForm = (
    props: hoursListStateInterface & { taskId: string }
): React.ReactElement => {
    const dispatch = useDispatch()
    const { taskId, hoursList } = props
    const { TextArea } = Input
    const [form] = Form.useForm()

    useEffect(() => {
        void gethourssdroplist(dispatch, taskId)
    }, [taskId])

    const onSave = (): void => {
        void onSaveChat()
    }

    const onSaveChat = async (): Promise<void> => {
        try {
            await form.validateFields()
            const formData = form.getFieldsValue()

            const formattedStartTime = dayjs(formData.startTime).format(
                'HH:mm A'
            )
            const formattedEndTime = dayjs(formData.endTime).format('HH:mm A')
            const formatstartDate = dayjs(formData.startDate).format(
                'DD/MM/YYYY'
            )

            const formDataFormat = {
                ...formData,
                taskHoursId: 0,
                taskId,
                startDate: formatstartDate ?? '',
                startTime: formattedStartTime ?? '',
                endTime: formattedEndTime ?? '',
                duration: '',
            }
            await SaveHours(dispatch, formDataFormat)
        } catch (error) {
            console.error('Error in saving this one', error)
        }
    }

    const columns: ColumnsType<PermissionListType> = [
        {
            title: 'Date',
            dataIndex: 'startDate',
            sorter: true,
            sortDirections: ['descend', 'ascend'],
        },
        {
            title: 'Start Time',
            dataIndex: 'startTime',
        },
        {
            title: 'End Time',
            dataIndex: 'endTime',
        },
        {
            title: 'Duration',
            dataIndex: 'duration',
        },
    ]

    const TaskForm = (): React.ReactElement => (
        <Form
            name="complex-form"
            initialValues={{ remember: true }}
            layout={'vertical'}
            autoComplete="off"
            form={form}
        >
            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item
                        label="Due Date"
                        name="startDate"
                        rules={[
                            {
                                required: true,
                                message: 'Please Enter Due Date!',
                            },
                        ]}
                    >
                        <DatePicker
                            name="startDate"
                            format="DD/MM/YYYY"
                            className={commonStyles.dateWidth}
                        />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="Start Time" name="startTime">
                        <TimePicker
                            name="startTime"
                            style={{ width: '100%' }}
                            format="HH:mm"
                        />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item label="End Time" name="endTime">
                        <TimePicker
                            name="endTime"
                            style={{ width: '100%' }}
                            format="HH:mm"
                        />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="Description" name="description">
                        <TextArea rows={2} />
                    </Form.Item>
                </Col>
            </Row>

            <Form.Item>
                <Button type="primary" onClick={onSave}>
                    Save
                </Button>
            </Form.Item>
        </Form>
    )

    const TaskList = (): React.ReactElement => (
        <>
            <>
                <SearchInput
                    placeHolder={'Search Banking Details by keywords'}
                    width="478"
                />
                <div className={commonStyles.table}>
                    <Table columns={columns} dataSource={hoursList} />
                </div>
            </>
        </>
    )

    return (
        <Tabs defaultActiveKey="1">
            <TabPane tab="Hours List" key="1">
                <TaskList />
            </TabPane>
            <TabPane tab="Hours Form" key="2">
                <TaskForm />
            </TabPane>
        </Tabs>
    )
}

const mapStateToProps = (state: any): hoursListStateInterface => {
    return {
        hoursList: state.backlog.hoursList,
        hoursListCount: state.backlog.hoursListCount,
    }
}
export default connect(mapStateToProps)(EventForm)
