'use client'

import {useState} from "react";
import {Tag} from "antd";
import {EditOutlined} from "@ant-design/icons";
import {LinkButton} from "../../view/LinkButton";
import {ExpertData, ProfileData} from "../../../types/profile";
import {i18nText} from "../../../i18nKeys/index";
import {PracticeDTO} from "../../../types/practice";
import {ExpertPractice} from "../../Experts/ExpertDetails";
import {EditExpertAboutModal} from "../../Modals/EditExpertAboutModal";

type ExpertAboutProps = {
    locale: string;
    practice?: PracticeDTO;
    person?: ProfileData;
    updateExpert: (key: keyof ExpertData) => void;
};

export const ExpertAbout = ({ locale, updateExpert, practice, person }: ExpertAboutProps) => {
    const [showEdit, setShowEdit] = useState<boolean>(false);

    const supervisionCount = practice?.person4Data?.supervisionPerYears && practice?.person4Data?.supervisionPerYearId
        ? practice.person4Data.supervisionPerYears.filter(({ id }) => id === practice.person4Data.supervisionPerYearId)
        : [];

    return (
        <div className="coaching-section__wrap">
            <div className="coaching-section">
                <div className="coaching-section__title">
                    <h2 className="title-h2">{i18nText('aboutCoach', locale)}</h2>
                    <LinkButton
                        type="link"
                        icon={<EditOutlined />}
                        onClick={() => setShowEdit(true)}
                    />
                </div>
                <div className="coaching-section__info">
                    <div className="coaching-section__practice">
                        {`${practice?.person4Data?.practiceHours || 0} ${i18nText('practiceHours', locale)} | ${supervisionCount.length > 0 ? supervisionCount[0].name : 0} ${i18nText('supervisionCount', locale)}`}
                    </div>
                    <div className="coaching-section__list">
                        {practice?.person4Data?.sessionCost && (
                            <div className="coaching-section__item">
                                <div>{i18nText('price', locale)}</div>
                                <div>{`${practice?.person4Data?.sessionCost} €`}</div>
                            </div>
                        )}
                        {practice?.person4Data?.sessionDuration && (
                            <div className="coaching-section__item">
                                <div>{i18nText('duration', locale)}</div>
                                <div>{`${practice?.person4Data?.sessionDuration} ${locale === 'ru' ? 'мин' : 'min'}`}</div>
                            </div>
                        )}
                    </div>
                    <div className="coaching-section__lang">
                        <div>{i18nText('sessionLang', locale)}</div>
                        <div className="skills__list">
                            {person?.languagesLinks && person.languagesLinks?.length > 0 && person.languagesLinks
                                .map(({ language: { code, nativeSpelling } }) => <Tag key={code} className="skills__list__item">{nativeSpelling}</Tag>)}
                        </div>
                    </div>
                    <ExpertPractice
                        locale={locale}
                        themes={practice?.person4Data?.themesGroups}
                        cases={practice?.person4Data?.practiceCases}
                    />
                </div>
            </div>
            <EditExpertAboutModal
                locale={locale}
                open={showEdit}
                practice={practice}
                person={person}
                handleCancel={() => setShowEdit(false)}
                refreshPractice={() => updateExpert('practice')}
                refreshPerson={() => updateExpert('person')}
            />
        </div>
    );
};