'use client';

import React, { FC, useEffect, useState } from 'react';
import { Modal, Form, Input, notification, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import { i18nText } from '../../i18nKeys';
import { addSessionComment } from '../../actions/sessions';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import { AUTH_TOKEN_KEY } from '../../constants/common';

dayjs.extend(utc);

type AddCommentModalProps = {
    open: boolean;
    handleCancel: () => void;
    locale: string;
    sessionId: number;
    refresh: () => void;
};

export const AddCommentModal: FC<AddCommentModalProps> = ({
    open,
    handleCancel,
    locale,
    sessionId,
    refresh
}) => {
    const [form] = Form.useForm<{ comment: string }>();
    const [loading, setLoading] = useState<boolean>(false);
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');

    const onAfterClose = () => {
        form.resetFields();
    };

    useEffect(() => {
        if (form) {
            form.resetFields();
        }
    }, []);

    const onAddComment = () => {
        form.validateFields().then(({ comment }) => {
            const createdAtUtc = dayjs().utc().format();

            setLoading(true);
            addSessionComment(locale, jwt, { sessionId, comment, createdAtUtc })
                .then(() => {
                    handleCancel();
                    refresh();
                })
                .catch((err) => {
                    notification.error({
                        message: 'Error',
                        description: err?.response?.data?.errMessage
                    });
                })
                .finally(() => {
                    setLoading(false);
                });
        })
    };

    return (
        <Modal
            className="b-modal"
            open={open}
            title={undefined}
            onOk={undefined}
            onCancel={handleCancel}
            afterClose={onAfterClose}
            footer={false}
            width={498}
            closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
        >
            <div className="b-modal__comment__content">
                <Form form={form} style={{ width: '100%' }}>
                    <Form.Item
                        name="comment"
                        noStyle
                        rules={[
                            {
                                required: true,
                                message: 'Please input your comment'
                            }
                        ]}
                    >
                        <Input.TextArea
                            className="b-textarea"
                            rows={4}
                            maxLength={1000}
                            placeholder="Your comment"
                        />
                    </Form.Item>
                </Form>
                <div className="b-modal__decline__button">
                    <Button
                        className="card-detail__apply"
                        onClick={onAddComment}
                        loading={loading}
                    >
                        Send
                    </Button>
                </div>
            </div>
        </Modal>
    );
};
