'use client'

import { useState } from 'react';
import { Tag } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { i18nText } from '../../../i18nKeys';
import { ExpertsTags } from '../../../types/tags';
import { ExpertData } from '../../../types/profile';
import { LinkButton } from '../../view/LinkButton';
import { EditExpertTagsModal } from '../../Modals/EditExpertTagsModal';

type ExpertTagsProps = {
    locale: string;
    data?: ExpertsTags;
    updateExpert: (key: keyof ExpertData) => void;
}

export const ExpertTags = ({ locale, data, updateExpert }: ExpertTagsProps) => {
    const [showEdit, setShowEdit] = useState<boolean>(false);

    return (
        <div className="coaching-section__wrap">
            <div className="coaching-section">
                <div className="coaching-section__title">
                    <h2 className="title-h2">{i18nText('topics', locale)}</h2>
                    <LinkButton
                        type="link"
                        icon={<EditOutlined />}
                        onClick={() => setShowEdit(true)}
                    />
                </div>
                <div className="skills__list">
                    {data?.themesTags && data.themesTags?.length > 0 && data.themesTags
                        .filter(({ isActive, isSelected }) => isActive && isSelected)
                        .map(({ id, name }) => <Tag key={id} className="skills__list__item">{name}</Tag>)}
                </div>
            </div>
            <EditExpertTagsModal
                locale={locale}
                open={showEdit}
                data={data}
                handleCancel={() => setShowEdit(false)}
                refresh={() => updateExpert('tags')}
            />
        </div>
    );
};
