'use client';

import React, { useCallback, useState } from 'react';
import { Input, Select } from 'antd';
import { AdditionalFilter } from '../../types/experts';
import { INITIAL_ADD_FILTER } from '../../constants/experts';
import { LOCALES } from '../../constants/locale';

export const ExpertsAdditionalFilter = () => {
    const [filter, setFilter] = useState<AdditionalFilter>(INITIAL_ADD_FILTER);

    const onChangeFilter = useCallback((key: string, value: any) => {
        setFilter({
            ...filter,
            [key]: value
        })
    }, [filter]);

    return (
        <div className="main-find__search">
            <div className="main-find__search__input">
                <input className="base-input" type="text" placeholder="Search for an Expert" />
            </div>
            <Input placeholder="Search for an Expert" onChange={(e) => onChangeFilter('text', e?.target?.value)}/>
            <div className="main-find__search__sort">
                <Select
                    defaultValue={INITIAL_ADD_FILTER.sort}
                    onChange={(val) => onChangeFilter('sort', val)}
                    options={[
                        { value: 'By top views', label: 'By top views' }
                    ]}
                />
            </div>
            <div className="main-find__search__language">
                <Select
                    mode="multiple"
                    defaultValue={INITIAL_ADD_FILTER.language}
                    onChange={(val) => onChangeFilter('language', val)}
                    options={Object.entries(LOCALES).map(([ value, label ]) => ({ value, label }))}
                />
            </div>
            <button className="btn-apply">Find</button>
        </div>
    );
};
