'use client'

import React, {useEffect, useState} from 'react';
import { Select, Tag } from 'antd';
import type { SelectProps } from 'antd';

type TagRender = SelectProps['tagRender'];

const tagRender: TagRender = (props) => {
    const { label } = props;

    return (
        <Tag className="skills__list__item">
            {label}
        </Tag>
    );
};

export const CustomMultiSelect = (props: any) => {
    const { label, value, ...other } = props;
    const [isActiveLabel, setIsActiveLabel] = useState<boolean>(false);

    useEffect(() => {
        if (label) {
            setIsActiveLabel(!!value?.length);
        } else {
            setIsActiveLabel(false);
        }
    }, [value]);

    return (
        <div className={`b-multiselect-wrap ${isActiveLabel ? 'b-multiselect__active' : ''}`}>
            <div className="b-multiselect-label">{label}</div>
            <Select
                className="b-multiselect"
                mode="multiple"
                value={value}
                showSearch={false}
                maxTagCount="responsive"
                tagRender={tagRender}
                onFocus={!isActiveLabel ? () => setIsActiveLabel(true) : undefined}
                onBlur={() => setIsActiveLabel(!!value?.length)}
                {...other}
            />
        </div>
    );
};
