'use client'

import { EditOutlined } from '@ant-design/icons';
import { EducationDTO } from '../../../types/education';
import { i18nText } from '../../../i18nKeys';
import { LinkButton } from '../../view/LinkButton';
import {ExpertCertificate} from "../../Experts/ExpertDetails";
import {useState} from "react";
import {ExpertData} from "../../../types/profile";
import {EditExpertEducationModal} from "../../Modals/EditExpertEducationModal";

type ExpertEducationProps = {
    locale: string;
    data?: EducationDTO;
    updateExpert: (key: keyof ExpertData) => void;
};

export const ExpertEducation = ({ locale, data, updateExpert }: ExpertEducationProps) => {
    const [showEdit, setShowEdit] = useState<boolean>(false);

    const getAssociationLevel = (accLevelId?: number) => {
        if (accLevelId) {
            const [cur] = (data?.associationLevels || []).filter(({ id }) => id === accLevelId) || [];

            return cur?.name || '';
        }

        return '';
    };

    const getAssociation = (accLevelId?: number) => {
        if (accLevelId) {
            const [curLevel] = (data?.associationLevels || []).filter(({ id }) => id === accLevelId) || [];
            if (curLevel) {
                const [cur] = (data?.associations || []).filter(({ id }) => id === curLevel.associationId) || [];
                return cur?.name || '';
            }
        }

        return '';
    };

    return (
        <div className="coaching-section__wrap">
            <div className="coaching-section">
                <div className="coaching-section__title">
                    <h2 className="title-h2">{i18nText('skillsInfo', locale)}</h2>
                    <LinkButton
                        type="link"
                        icon={<EditOutlined />}
                        onClick={() => setShowEdit(true)}
                    />
                </div>
                {data?.person2Data?.educations?.length > 0 && (
                    <div className="coaching-section__desc">
                        {data?.person2Data?.educations?.map(({ id, title, description, document }) => (
                            <div key={id}>
                                <h3 className="title-h3">{title}</h3>
                                {description && <div className="base-text">{description}</div>}
                                {document && (
                                    <div className="sertific">
                                        <ExpertCertificate document={document} />
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                )}
            </div>
            {data?.person2Data?.certificates?.length > 0 && (
                <div className="coaching-section">
                    <h2 className="title-h2">{i18nText('profCertification', locale)}</h2>
                    <div className="coaching-section__desc">
                        {data?.person2Data?.certificates?.map((cert) => (
                            <div key={cert.id}>
                                <div className="base-text">
                                    {`${getAssociationLevel(cert?.associationLevelId)} ${getAssociation(cert?.associationLevelId)}`}
                                </div>
                                {cert.document && (
                                    <div className="sertific">
                                        <ExpertCertificate document={cert.document} />
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            )}
            {data?.person2Data?.trainings?.length > 0 && (
                <div className="coaching-section">
                    <h2 className="title-h2">
                        {`${i18nText('trainings', locale)} | ${i18nText('seminars', locale)} | ${i18nText('courses', locale)}`}
                    </h2>
                    <div className="coaching-section__desc">
                        {data?.person2Data?.trainings?.map(({ id, title, description, document }) => (
                            <div key={id}>
                                <h3 className="title-h3">{title}</h3>
                                {description && <div className="base-text">{description}</div>}
                                {document && (
                                    <div className="sertific">
                                        <ExpertCertificate document={document} />
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            )}
            {data?.person2Data?.mbas?.length > 0 && (
                <div className="coaching-section">
                    <h2 className="title-h2">{i18nText('mba', locale)}</h2>
                    <div className="coaching-section__desc">
                        {data?.person2Data?.mbas?.map(({ id, title, description, document }) => (
                            <div key={id}>
                                <h3 className="title-h3">{title}</h3>
                                {description && <div className="base-text">{description}</div>}
                                {document && (
                                    <div className="sertific">
                                        <ExpertCertificate document={document} />
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            )}
            {data?.person2Data?.experiences?.length > 0 && (
                <div className="coaching-section">
                    <h2 className="title-h2">{i18nText('mExperiences', locale)}</h2>
                    <div className="coaching-section__desc">
                        {data?.person2Data?.experiences?.map(({ id, title, description, document }) => (
                            <div key={id}>
                                <h3 className="title-h3">{title}</h3>
                                {description && <div className="base-text">{description}</div>}
                                {document && (
                                    <div className="sertific">
                                        <ExpertCertificate document={document} />
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            )}
            <EditExpertEducationModal
                open={showEdit}
                handleCancel={() => setShowEdit(false)}
                locale={locale}
                data={data}
                refresh={() => updateExpert('education')}
            />
        </div>
    );
};
