'use client';

import React, { FC, useEffect, useState } from 'react';
import { Form, Input, Modal, notification } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { SessionType } from '../../types/sessions';
import { AUTH_TOKEN_KEY } from '../../constants/common';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import { cancelUpcomingSession, declineRequestedSession } from '../../actions/sessions';
// import { i18nText } from '../../i18nKeys';
import { FilledButton } from '../view/FilledButton';

type DeclineModalProps = {
    open: boolean;
    handleCancel: () => void;
    activeType: SessionType;
    locale: string;
    sessionId: number;
    success: () => void;
};

export const DeclineSessionModal: FC<DeclineModalProps> = ({
    open,
    handleCancel,
    activeType,
    locale,
    sessionId,
    success
}) => {
    const [form] = Form.useForm<{ reason: string }>();
    const [loading, setLoading] = useState<boolean>(false);
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');

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

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

    const onDecline = () => {
        form.validateFields().then(({ reason }) => {
            const fetchFunc = activeType === SessionType.UPCOMING ? cancelUpcomingSession : declineRequestedSession;

            setLoading(true);
            fetchFunc(locale, jwt, { sessionId, reason })
                .then(() => {
                    success();
                })
                .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__decline__content">
                <div className="b-modal__decline__logo">
                    <img className="" src="/images/decline-sign.svg" alt=""/>
                </div>
                <div className="b-modal__decline__title">
                    Enter a reason for cancelling the session
                </div>
                <Form form={form} style={{ width: '100%' }}>
                    <Form.Item
                        name="reason"
                        noStyle
                        rules={[
                            {
                                required: true,
                                message: 'Please input the reason'
                            }
                        ]}
                    >
                        <Input.TextArea
                            className="b-textarea"
                            rows={1}
                            placeholder="Describe the reason for the rejection"
                        />
                    </Form.Item>
                </Form>
                <div className="b-modal__decline__button">
                    <FilledButton
                        type="primary"
                        danger
                        onClick={onDecline}
                        loading={loading}
                    >
                        Decline
                    </FilledButton>
                </div>
            </div>
        </Modal>
    );
};
