import React, { Suspense } from 'react';
import type { Metadata } from 'next';
import { unstable_setRequestLocale } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { getExpertById, getExpertsList } from '../../../../actions/experts';
import {
    ExpertCard,
    ExpertCertificate,
    ExpertInformation,
    ExpertPractice
} from '../../../../components/Experts/ExpertDetails';
import { Details } from '../../../../types/experts';
import { BackButton } from '../../../../components/view/BackButton';
import { i18nText } from '../../../../i18nKeys';

export const metadata: Metadata = {
    title: 'Bbuddy - Experts item',
    description: 'Bbuddy desc experts'
};

export async function generateStaticParams({
    params: { locale },
}: { params: { locale: string } }) {
    unstable_setRequestLocale(locale);
    const result: { locale: string, expertId: string }[] = [];
    const experts = await getExpertsList(locale, { themesTagIds: [] });

    experts?.coaches?.forEach(({ id }) => {
        result.push({ locale, expertId: id.toString() });
    });

    return result;
}

export default async function ExpertItem({ params: { expertId = '', locale } }: { params: { expertId: string, locale: string } }) {
    if (!expertId) notFound();

    const expert = await getExpertById(expertId, locale);
    console.log(expert);

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

            return cur?.name || '';
        }

        return '';
    };

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

        return '';
    };

    const generateDescription = ({ id, title, description, document }: Details) => (
        <div key={id}>
            <h3 className="title-h3">{title}</h3>
            <p className="base-text">{description}</p>
            {document && (
                <div className="sertific">
                    <ExpertCertificate document={document} />
                </div>
            )}
        </div>
    );

    return (
        <div className="b-page">
            <div className="b-inner">
                <div className="b-page__back">
                    <Suspense>
                        <BackButton className="btn-back btn-back__auto">
                            <img src="/images/arrow-back.svg" className="" alt="" />
                            {i18nText('backToExperts', locale)}
                        </BackButton>
                    </Suspense>
                </div>
                <ExpertCard expert={expert} locale={locale} />
                <ExpertInformation expert={expert} locale={locale} />

                <h2 className="title-h2">{i18nText('expertBackground', locale)}</h2>
                <p 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.
                </p>
                {expert?.publicCoachDetails?.educations && expert.publicCoachDetails.educations?.map(generateDescription)}
                {expert?.publicCoachDetails?.certificates && expert.publicCoachDetails.certificates.length > 0 && (
                    <div>
                        <h3 className="title-h3">{i18nText('profCertification', locale)}</h3>
                        {expert.publicCoachDetails.certificates?.map((cert) => (
                            <div key={cert.id}>
                                <p className="base-text">
                                    {`${getAssociationLevel(cert?.associationLevelId)} ${getAssociation(cert?.associationLevelId)}`}
                                </p>
                                {cert.document && (
                                    <div className="sertific">
                                        <ExpertCertificate document={cert.document} />
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                )}
                {expert?.publicCoachDetails?.trainings && expert.publicCoachDetails.trainings?.map(generateDescription)}
                {expert?.publicCoachDetails?.mbas && expert.publicCoachDetails.mbas?.map(generateDescription)}
                {expert?.publicCoachDetails?.experiences && expert.publicCoachDetails.experiences?.map(generateDescription)}
                <ExpertPractice expert={expert} locale={locale} />

                {/* <h2 className="title-h2">All Offers by this Expert</h2>
                <div className="offers-list">
                    <div className="card-profile">
                        <div className="card-profile__skills">
                            <div className="skills__list">
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__more">+6</div>
                            </div>
                        </div>
                        <div className="card-profile__title">Senior Software Engineer</div>
                        <div className="card-profile__subtitle">Auth0</div>
                        <div className="card-profile__desc">
                            I have worked across a variety of organizations, lead teams, and delivered quality software
                            for 8 years. In that time I've worked as an independent consultant, at agencies as a team
                            lead, and as a senior engineer at Auth0. I also host a podcast
                            https://anchor.fm/work-in-programming where I break down how …
                        </div>
                        <div className="card-profile__footer">
                            <a href="#">Details
                                <img className="" src="/images/chevron-forward.svg" alt="" />
                            </a>
                        </div>
                    </div>
                    <div className="card-profile">
                        <div className="card-profile__skills">
                            <div className="skills__list">
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__item">Engineering & Data</div>
                                <div className="skills__list__more">+6</div>
                            </div>
                        </div>
                        <div className="card-profile__title">Senior Software Engineer</div>
                        <div className="card-profile__subtitle">Auth0</div>
                        <div className="card-profile__desc">
                            I have worked across a variety of organizations, lead teams, and delivered quality software
                            for 8 years. In that time I've worked as an independent consultant, at agencies as a team
                            lead, and as a senior engineer at Auth0. I also host a podcast
                            https://anchor.fm/work-in-programming where I break down how …
                        </div>
                        <div className="card-profile__footer">
                            <a href="#">Details
                                <img className="" src="/images/chevron-forward.svg" alt="" />
                            </a>
                        </div>
                    </div>
                </div> */}
            </div>
        </div>
    );
};