import React from 'react';
import { DEFAULT_PAGE_SIZE } from '../../constants/common';
import { getFilter } from '../../utils/filter';
import { getTagList, getLanguages } from '../../actions/tags';
import { getExpertsList } from '../../actions/experts';
import { ExpertsFilter } from './Filter';
import { ExpertsAdditionalFilter } from './AdditionalFilter';
import { ExpertsList } from './ExpertsList';
import { i18nText } from '../../i18nKeys';

type ExpertsProps = {
    basePath?: string;
    locale: string;
    pageSize?: number;
};

export const Experts = async ({ basePath = '/', locale, pageSize = DEFAULT_PAGE_SIZE }: ExpertsProps) => {
    const searchData = await getTagList(locale);
    const languages = await getLanguages(locale);
    const filter = getFilter({ pageSize });
    const experts = await getExpertsList(locale, filter);
    const durFrom = `${searchData?.sessionCostMin || 0}${locale === 'ru' ? 'мин' : 'min'}`;
    const durTo = `${searchData?.sessionDurationMax || 0}${locale === 'ru' ? 'мин' : 'min'}`;
    const priceFrom = `${searchData?.sessionCostMin || 0}€`;
    const priceTo = `${searchData?.sessionCostMax || 0}€`;

    return (
        <div className="row">
            <div className="col-xl-3 col-lg-4 d-none d-lg-block">
                <ExpertsFilter
                    searchData={searchData}
                    languages={languages}
                    basePath={basePath}
                    locale={locale}
                    priceTitle={i18nText('fromTo', locale).replace('$', priceFrom).replace('$', priceTo)}
                    durationTitle={i18nText('fromTo', locale).replace('$', durFrom).replace('$', durTo)}
                />
            </div>
            <div className="col-xl-9 col-lg-8 ">
                <ExpertsAdditionalFilter
                    locale={locale}
                    basePath={basePath}
                />
                <ExpertsList
                    locale={locale}
                    data={experts}
                    basePath={basePath}
                    baseFilter={filter}
                    pageSize={pageSize}
                />
            </div>
        </div>
    );
};
