import React from 'react';
import Cascader from 'rc-cascader';
import type {ICascadeProps as Props} from './cascade.type';
import {TreeSelectInputComponent as Input} from '../../molecules/tree-select-input/tree-select-input.component';
import {CascadeStyle as S} from './cascade.style';
import {GlobalStyles} from '@mui/material';

export const CascadeComponent: React.FC<Props> = ({
    value,
    options,
    placeholder,
    loadData,
    onChange,
    onDropdownVisibleChange,
    placeholderInputText,
    clearText,
}) => {
    const onClean = () => onChange && onChange([], []);
    return (
        <>
            <GlobalStyles styles={S.customizations} />
            <Cascader
                options={options}
                checkable
                value={value}
                loadData={loadData}
                onChange={onChange}
                onOpenChange={onDropdownVisibleChange}
                showCheckedStrategy='SHOW_PARENT'
                changeOnSelect
                direction='rtl'
                expandIcon={<S.ChevronLeft />}
                loadingIcon={<S.Spinner />}
            >
                <Input
                    text={`${value?.length || 0} ${placeholderInputText}`}
                    placeholder={placeholder}
                    showCleanButton={!!value?.length}
                    onClean={onClean}
                    clearBadgeText={clearText}
                />
            </Cascader>
        </>
    );
};