import React, { useEffect, useState } from 'react'
import { Button, Col, Form, Input, Row } from 'antd'
import startStyles from '../backLogList.less'
import S3Upload from '../../../Components/S3Upload'
import {
    SaveAttachment,
    getattachmentdroplist,
} from '../../../Services/Helpdesk/Backlog'
import { useDispatch } from 'react-redux'
import ReactQuillComponet from '../../../Components/ReactQillComponet'

const DescriptinSection = (props: any): React.ReactElement => {
    const dispatch = useDispatch()
    const [emailText, setEmailText] = useState('')
    const [form] = Form.useForm()
    const { TextArea } = Input
    const { taskId } = props
    const [attachmentID, setAttachmentID] = useState(0)

    const setFormData = (name: string, location: string): void => {
        form.setFieldValue(name, location)
    }

    const onSave = (): void => {
        form.validateFields()
            .then((values) => {
                const formattedValues = {
                    ...values,
                    attachmentID,
                    taskId,
                    attachmentFile: values.attachmentFile,
                    description: values.description,
                }
                void SaveAttachment(dispatch, formattedValues)
            })
            .catch((errorInfo) => {
                console.log('Validation Failed:', errorInfo)
            })
    }

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

    const fetchDataAndSetFormFields = async (): Promise<void> => {
        try {
            const response = await getattachmentdroplist(dispatch, taskId)
            const data = response.data
            const lastCreatedAttachment = data[data?.length - 1]
            const lastCreatedAttachment1 = data[data?.length - 2]
            setAttachmentID(lastCreatedAttachment.attachmentID)
            const fieldsValue = {
                attachmentFile: lastCreatedAttachment.attachmentFile,
                attachmentFile2: lastCreatedAttachment1.attachmentFile,
                description: lastCreatedAttachment.description,
            }
            form.setFieldsValue(fieldsValue)
        } catch (error) {
            console.error('Error fetching data:', error)
        }
    }
    const onDescriptinChange = (value: string): void => {
        setEmailText(value)
    }

    return (
        <div>
            <Row>
                <Col span={14}>
                    {' '}
                    <Row>
                        <>
                            <Form
                                name="complex-form"
                                labelCol={{ span: 24 }}
                                wrapperCol={{ span: 24 }}
                                layout={'vertical'}
                                autoComplete="off"
                                form={form}
                            >
                                <Row>
                                    <Form.Item
                                        name="description"
                                        label="Description"
                                    >
                                        <div
                                            className={
                                                startStyles.textFunctionality
                                            }
                                        >
                                            {/* <ReactQuill
                                                theme="snow"
                                                value={emailText}
                                                onChange={(content) => {
                                                    setEmailText(content)
                                                }}
                                                modules={modules}
                                                formats={formats}
                                                className={
                                                    startStyles.reactQuillTodoList
                                                }
                                            /> */}
                                            <ReactQuillComponet
                                                value={emailText}
                                                onChange={(value: string) => {
                                                    onDescriptinChange(value)
                                                }}
                                                className={
                                                    startStyles.reactQuillTodoList
                                                }
                                            />
                                        </div>
                                    </Form.Item>
                                </Row>
                                <Row gutter={24}>
                                    <Col span={12}>
                                        <Form.Item
                                            label="Expectd Result"
                                            name="attachmentFile"
                                        >
                                            <S3Upload
                                                name={'attachmentFile'}
                                                value={form.getFieldValue(
                                                    'attachmentFile'
                                                )}
                                                setFormData={setFormData}
                                                corporate={''}
                                                corporateid={0}
                                                documenttype={''}
                                                documentbaseId={0}
                                                memberpersonId={0}
                                            />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <Form.Item
                                            label="Actual Result"
                                            name="attachmentFile2"
                                        >
                                            <S3Upload
                                                name={'attachmentFile2'}
                                                value={form.getFieldValue(
                                                    'attachmentFile2'
                                                )}
                                                setFormData={setFormData}
                                                corporate={''}
                                                corporateid={0}
                                                documenttype={''}
                                                documentbaseId={0}
                                                memberpersonId={0}
                                            />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Form>
                            <Row>
                                <Col>
                                    <Form.Item>
                                        <Button
                                            type="default"
                                            size="middle"
                                            onClick={onSave}
                                        >
                                            Save
                                        </Button>
                                    </Form.Item>
                                </Col>
                                <Col>
                                    <Form.Item>
                                        <Button
                                            type="default"
                                            size="middle"
                                            onClick={onSave}
                                        >
                                            Cancel
                                        </Button>
                                    </Form.Item>
                                </Col>
                            </Row>
                        </>
                    </Row>
                    <Row>
                        <span>Activity</span>
                    </Row>
                    <Row>
                        <span className={startStyles.allCommentsHistory}>
                            All
                        </span>
                        <span className={startStyles.allCommentsHistory}>
                            Comments
                        </span>
                        <span className={startStyles.allCommentsHistory}>
                            History
                        </span>
                    </Row>
                    <Row>
                        <TextArea rows={1} placeholder="Add a coment" />
                    </Row>
                </Col>
            </Row>
        </div>
    )
}

export default DescriptinSection
