'use client'

import { useState } from 'react';
import { Tag } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { ExpertData, ProfileData } from '../../../types/profile';
import { i18nText } from '../../../i18nKeys';
import { PracticeDTO } from '../../../types/practice';
import { LinkButton } from '../../view/LinkButton';
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>
    );
};
