'use client';

import React, { FC, useEffect, useState } from 'react';
import {Modal, Button, message, Form, Collapse, GetProp, UploadProps} from 'antd';
import type { CollapseProps } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { i18nText } from '../../i18nKeys';
import { PracticePersonData, PracticeDTO, PracticeData, PracticeCase } from '../../types/practice';
import { AUTH_TOKEN_KEY } from '../../constants/common';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import {setEducation} from '../../actions/profile';
import {Certificate, Details, EducationData, EducationDTO, Experience} from "../../types/education";
import {CertificatesContent} from "./educationModalContent/Certificates";
import {EducationsContent} from "./educationModalContent/Educations";
import {TrainingsContent} from "./educationModalContent/Trainings";
import {MbasContent} from "./educationModalContent/Mbas";
import {ExperiencesContent} from "./educationModalContent/Experiences";

type EditExpertEducationModalProps = {
    open: boolean;
    handleCancel: () => void;
    locale: string;
    data?: EducationDTO;
    refresh: () => void;
};

type FormPerson = PracticePersonData & {
    sessionLang: number[];
};

export const EditExpertEducationModal: FC<EditExpertEducationModalProps> = ({
    open,
    handleCancel,
    locale,
    data,
    refresh
}) => {
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
    const [loading, setLoading] = useState<boolean>(false);
    const [form] = Form.useForm<FormPerson>();
    const [editedData, setEditedData] = useState<EducationData>(data?.person2Data as EducationData);

    const onSave = () => {
        setLoading(true);
        setEducation(locale, jwt, editedData)
            .then(() => {
                handleCancel();
                refresh();
            })
            .catch(() => {
                message.error('Не удалось сохранить образование');
            })
            .finally(() => {
                setLoading(false);
            })
    };

    const items: CollapseProps['items'] = [
        {
            key: 'certificates',
            label: i18nText('profCertification', locale),
            children: (
                <CertificatesContent
                    certificates={editedData?.certificates}
                    update={(certificates) => setEditedData({ ...editedData, certificates })}
                    locale={locale}
                    associationLevels={data?.associationLevels}
                    associations={data?.associations}
                />
            ),
        },
        {
            key: 'educations',
            label: i18nText('education', locale),
            children: (
                <EducationsContent
                    educations={editedData?.educations}
                    update={(educations) => setEditedData({ ...editedData, educations })}
                    locale={locale}
                />
            ),
        },
        {
            key: 'trainings',
            label: `${i18nText('trainings', locale)} | ${i18nText('seminars', locale)} | ${i18nText('courses', locale)}`,
            children: (
                <TrainingsContent
                    trainings={editedData?.trainings}
                    update={(trainings) => setEditedData({ ...editedData, trainings })}
                    locale={locale}
                />
            ),
        },
        {
            key: 'mbas',
            label: i18nText('mba', locale),
            children: (
                <MbasContent
                    mbas={editedData?.mbas}
                    update={(mbas) => setEditedData({ ...editedData, mbas })}
                    locale={locale}
                />
            ),
        },
        {
            key: 'experiences',
            label: i18nText('mExperiences', locale),
            children: (
                <ExperiencesContent
                    experiences={editedData?.experiences}
                    update={(experiences) => setEditedData({ ...editedData, experiences })}
                    locale={locale}
                />
            ),
        },
    ];

    return (
        <Modal
            className="b-modal"
            open={open}
            title={undefined}
            onOk={undefined}
            onCancel={handleCancel}
            footer={false}
            width={498}
            closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
        >
            <div className="b-modal__expert__content">
                <div className="b-modal__expert__title">{i18nText('skillsInfo', locale)}</div>
                <div className="b-modal__expert__inner" style={{ paddingRight: 12 }}>
                    <Form form={form} style={{ width: '100%' }}>
                        <Collapse
                            ghost
                            expandIconPosition="end"
                            items={items}
                        />
                    </Form>
                </div>
                <div className="b-modal__expert__button">
                    <Button
                        className="card-detail__apply"
                        onClick={onSave}
                        loading={loading}
                    >
                        {i18nText('save', locale)}
                    </Button>
                </div>
            </div>
        </Modal>
    );
};
