'use client'

import React, { useState } from 'react';
import { Alert, message } from 'antd';
import Image from 'next/image';
import { i18nText } from '../../i18nKeys';
import { ExpertData, PayInfo, ProfileData } from '../../types/profile';
import { ExpertsTags } from '../../types/tags';
import { PracticeDTO } from '../../types/practice';
import { EducationDTO } from '../../types/education';
import { ScheduleDTO } from '../../types/schedule';
import { AUTH_TOKEN_KEY } from '../../constants/common';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import { getTags, getPayData, getEducation, getPractice, getSchedule, getPersonalData } from '../../actions/profile';
import { Loader } from '../view/Loader';
import { ExpertTags } from './content/ExpertTags';
import { ExpertSchedule } from './content/ExpertSchedule';
import { ExpertPayData } from './content/ExpertPayData';
import { ExpertEducation } from './content/ExpertEducation';
import { ExpertAbout } from './content/ExpertAbout';

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

type NewDataPartProps<T> = {
    key: keyof ExpertData,
    getNewData: (locale: string, token: string) => Promise<T>,
    errorMessage?: string;
};

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

    function getNewPartData <T>({ key, getNewData, errorMessage = 'Не удалось получить данные' }: NewDataPartProps<T>) {
        setLoading([key]);
        getNewData(locale, jwt)
            .then((newData) => {
                updateData({
                    ...data,
                    [key]: newData
                });
            })
            .catch(() => message.error(errorMessage))
            .finally(() => setLoading([]));
    }

    const updateExpert = (key: keyof ExpertData) => {
        switch (key) {
            case 'tags':
                getNewPartData<ExpertsTags>({
                    key,
                    getNewData: getTags,
                    errorMessage: 'Не удалось получить направления'
                });
                break;
            case 'practice':
                getNewPartData<PracticeDTO>({
                    key,
                    getNewData: getPractice
                });
                break;
            case 'education':
                getNewPartData<EducationDTO>({
                    key,
                    getNewData: getEducation,
                    errorMessage: 'Не удалось получить информацию об образовании'
                });
                break;
            case 'schedule':
                getNewPartData<ScheduleDTO>({
                    key,
                    getNewData: getSchedule,
                    errorMessage: 'Не удалось получить расписание'
                });
                break;
            case 'person':
                getNewPartData<ProfileData>({
                    key,
                    getNewData: getPersonalData,
                    errorMessage: 'Не удалось получить информацию о пользователе'
                });
                break;
            case 'payData':
                getNewPartData<{ person6Data?: PayInfo }>({
                    key,
                    getNewData: getPayData,
                    errorMessage: 'Не удалось получить платежную информацию'
                });
                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">
                        <Image src={data?.person?.faceImageUrl || '/images/user-avatar.png'} width={216} height={216} alt="" />
                    </div>
                    <div className="coaching-profile__inner" style={{ flex: 1 }}>
                        <div className="coaching-profile__name">
                            {`${data?.person?.username} ${data?.person?.surname || ''}`}
                        </div>
                        {!isFull && (
                            <Alert
                                message="Проверьте заполненность блоков"
                                description={(
                                    <ul className="b-rules-list">
                                        <li>о себе</li>
                                        <li>темы сессии</li>
                                        <li>рабочее расписание</li>
                                        <li>информация об образовании</li>
                                        <li>платежная информация</li>
                                    </ul>
                                )}
                                type="warning"
                                showIcon
                            />
                        )}
                    </div>
                </div>

                <Loader isLoading={loading.includes('practice') || loading.includes('person')}>
                    <ExpertAbout
                        locale={locale}
                        practice={data?.practice}
                        person={data?.person}
                        updateExpert={updateExpert}
                    />
                </Loader>
                <Loader isLoading={loading.includes('tags')}>
                    <ExpertTags
                        locale={locale}
                        data={data?.tags}
                        updateExpert={updateExpert}
                    />
                </Loader>
                <Loader isLoading={loading.includes('schedule')}>
                    <ExpertSchedule
                        locale={locale}
                        data={data?.schedule}
                        updateExpert={updateExpert}
                    />
                </Loader>
                <Loader isLoading={loading.includes('education')}>
                    <ExpertEducation
                        locale={locale}
                        data={data?.education}
                        updateExpert={updateExpert}
                    />
                </Loader>
                <Loader isLoading={loading.includes('payData')}>
                    <ExpertPayData
                        locale={locale}
                        data={data?.payData?.person6Data}
                        updateExpert={updateExpert}
                    />
                </Loader>
            </div>
        </>
    );
};