'use client'

import { useState } from 'react';
import { message } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { i18nText } from '../../i18nKeys';
import { ExpertData } from '../../types/profile';
import { AUTH_TOKEN_KEY } from '../../constants/common';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import { getTags } from '../../actions/profile';
import { Loader } from '../view/Loader';
import { LinkButton } from '../view/LinkButton';
import { ExpertTags } from './content/ExpertTags';
import { ExpertSchedule } from './content/ExpertSchedule';
import { ExpertPayData } from './content/ExpertPayData';
import { ExpertEducation } from './content/ExpertEducation';

type ExpertProfileProps = {
    locale: string;
    data: ExpertData;
    updateData: (data: ExpertData) => void;
};

export const ExpertProfile = ({ locale, data, updateData }: ExpertProfileProps) => {
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
    const [loading, setLoading] = useState<(keyof ExpertData)[]>([]);

    const updateExpert = (key: keyof ExpertData) => {
        switch (key) {
            case 'tags':
                setLoading([key]);
                getTags(locale, jwt)
                    .then((tags) => {
                        updateData({
                            ...data,
                            tags
                        });
                    })
                    .catch(() => message.error('Не удалось обновить направления'))
                    .finally(() => setLoading([]));
                break;
            default:
                break;
        }
    };

    return (
        <>
            <ol className="breadcrumb">
                <li className="breadcrumb-item active" aria-current="page">{i18nText('coaching', locale)}</li>
            </ol>
            <div className="coaching-info">
                <div className="coaching-profile">
                    <div className="coaching-profile__portrait">
                        <img src="/images/person.png" className="" alt="" />
                    </div>
                    <div className="coaching-profile__inner">
                        <div className="coaching-profile__name">
                            David
                        </div>
                    </div>
                </div>
                <div className="coaching-section__wrap">
                    <div className="coaching-section">
                        <div className="coaching-section__title">
                            <h2 className="title-h2">{i18nText('aboutCoach', locale)}</h2>
                            <h2 className="title-h2">person1 + person4</h2>
                            <LinkButton
                                type="link"
                                icon={<EditOutlined />}
                            />
                        </div>
                        <div className="card-profile__header__title">
                            {`12 ${i18nText('practiceHours', locale)}`}
                        </div>
                        <div className="card-profile__header__title ">
                            {`15 ${i18nText('supervisionCount', locale)}`}
                        </div>
                        <div className="base-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet, lectus nec viverra
                            malesuada, ligula sem tempor risus, non posuere urna diam a libero.
                        </div>
                    </div>
                </div>
                <Loader isLoading={loading.includes('tags')}>
                    <ExpertTags
                        locale={locale}
                        data={data?.tags}
                        updateExpert={updateExpert}
                    />
                </Loader>
                <ExpertSchedule locale={locale} data={data?.schedule} />
                <ExpertEducation locale={locale} data={data?.education} />
                <ExpertPayData locale={locale} data={data?.payData?.person6Data} />
            </div>
        </>
    )
};