import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import './ExcelToolBar.scss';
import MenuOption from '../../MenuOption';
import Tooltip from '../../Tooltip';
import Icon from '../../Icon';
import Select from '../../Select';
import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
import useSelector from '../ExcelFile/ExcelFileComponents/use-selector';
import { convertStyleToBackend } from '../dataConversion';
import { EntireWorksheetSelection } from '../ExcelFile/ExcelFileComponents/selection';
import { convertPxToPt, EmptyCell, fontFamilyList, fontSizeList, } from '../ExcelFile/ExcelFileComponents/util';
const ExcelToolBar = ({ toolbar = 'show', editable, onBold, onItalic, setUnderlineType, setColor, setFontSize, setFontFamily, setTextAlign, setBackgroundColor, setBorderType, setFormatePainter, }) => {
    const selected = useSelector((state) => state.selected instanceof EntireWorksheetSelection);
    const [disable, setDisable] = useState(toolbar === 'disable' || !editable);
    const cell = useSelector((state) => state.active ? Matrix.get(state.active, state.model.data) : null);
    const data = useSelector((state) => state.model.data);
    const formattedStyle = useSelector((state) => state.formattedStyle.open);
    // Default style to Excel
    const basicStyle = {
        ...EmptyCell.style,
        color: '#1e161f', // Needed hexacode for backend
        backgroundColor: '#ffffff', // Needed hexacode for backend
        borderColor: '#1e161f', // Needed hexacode for backend
    };
    const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
    const borderMenuRef = useRef(null);
    useEffect(() => {
        if (cell?.style &&
            JSON.stringify(cell.style) !== JSON.stringify(cellStyle)) {
            setCellStyle(cell?.style || basicStyle);
        }
        if (selected) {
            setDisable(!editable);
        }
        else if (cell && typeof cell.readOnly === 'boolean') {
            setDisable(cell.readOnly ||
                toolbar === 'disable' ||
                !editable ||
                cell?.inputType?.type === 'dropDown');
        }
    }, [cell, editable]);
    const styleBackend = convertStyleToBackend(cellStyle);
    const [border, setBorder] = useState('border-none');
    const [selectedFontFamily, setSelectedFontFamily] = useState({
        label: '',
        value: '',
    });
    const [selectedFontSize, setSelectedFontSize] = useState({
        label: '',
        value: '',
    });
    const [colorContainer, setColorContainer] = useState({
        color: basicStyle.color,
        backgroundColor: basicStyle.backgroundColor,
        borderColor: basicStyle.borderColor,
    });
    const borderTypeIcon = [
        { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
        { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
        { value: 'border-left', label: 'Border Left', icon: 'border_left' },
        { value: 'border-right', label: 'Border Right', icon: 'border_right' },
        { value: 'border-top', label: 'Border Top', icon: 'border_top' },
        { value: 'border-none', label: 'No Border', icon: 'no_border' },
    ];
    const fontSize = fontSizeList.map((fontSize) => ({
        label: fontSize,
        value: fontSize,
    }));
    const textColorRef = useRef(null);
    const bgColorRef = useRef(null);
    const getTextColor = (color) => {
        setColorContainer((prev) => ({ ...prev, color: color }));
    };
    const getBackgroundColor = (color) => {
        setColorContainer((prev) => ({ ...prev, backgroundColor: color }));
    };
    useEffect(() => {
        let timeGap = setTimeout(() => {
            setColor(data, colorContainer.color);
        }, 0);
        return () => {
            clearTimeout(timeGap);
        };
    }, [colorContainer.color]);
    useEffect(() => {
        let timeGap = setTimeout(() => {
            setBackgroundColor(data, colorContainer.backgroundColor);
        }, 0);
        return () => {
            clearTimeout(timeGap);
        };
    }, [colorContainer.backgroundColor]);
    let getBorderIcon = () => {
        const selectedIcon = borderTypeIcon.find((e) => e.value === border);
        return selectedIcon ? selectedIcon.icon : '';
    };
    useEffect(() => {
        const fontFamily = cellStyle.fontFamily;
        const fontSize = `${convertPxToPt(cellStyle.fontSize)}`;
        setSelectedFontFamily({
            label: fontFamily ?? 'Times New Roman',
            value: fontFamily ?? 'Times New Roman',
        });
        setSelectedFontSize({ label: fontSize ?? '11', value: fontSize ?? '11' });
    }, [cellStyle]);
    return (_jsxs("div", { className: "ff-excel-toolbar", children: [_jsxs("div", { className: "ff-excel-toolbar-font ", children: [_jsx("div", { className: "ff-excel-toolbar-font-family", children: _jsx(Select, { disabled: disable, height: 24, tooltip: true, showToolTip: true, showLabel: false, optionZIndex: 2000, onChange: (e) => {
                                setSelectedFontFamily({ label: e.label, value: e.label });
                                setFontFamily(data, e.value);
                            }, required: false, optionsList: fontFamilyList, selectedOption: selectedFontFamily }) }), _jsx("div", { className: "ff-excel-toolbar-font-size", children: _jsx(Select, { disabled: disable, height: 24, showLabel: false, optionZIndex: 2000, required: false, onChange: (e) => {
                                setSelectedFontSize({ label: e.label, value: e.value });
                                setFontSize(data, e.value);
                            }, optionsList: fontSize, selectedOption: selectedFontSize }) })] }), _jsx("div", { className: "ff-excel-toolbar-divider" }), _jsxs("div", { className: "ff-excel-toolbar-icon", children: [_jsx(Tooltip, { placement: "top", title: 'Text Left', children: _jsx(Icon, { disabled: disable, variant: cellStyle.textAlign === 'left' ? 'dark' : 'light', hoverEffect: cellStyle.textAlign === 'left' ? false : true, onClick: () => setTextAlign(data, 'left'), name: "text_align_left" }) }), _jsx(Tooltip, { placement: "top", title: 'Text Center', children: _jsx(Icon, { disabled: disable, variant: cellStyle.textAlign === 'center' ? 'dark' : 'light', hoverEffect: cellStyle.textAlign === 'center' ? false : true, onClick: () => setTextAlign(data, 'center'), name: "text_align_center" }) }), _jsx(Tooltip, { placement: "top", title: 'Text Right', children: _jsx(Icon, { disabled: disable, variant: cellStyle.textAlign === 'right' ? 'dark' : 'light', hoverEffect: cellStyle.textAlign === 'right' ? false : true, onClick: () => setTextAlign(data, 'right'), name: "text_align_right" }) })] }), _jsx("div", { className: "ff-excel-toolbar-divider" }), _jsxs("div", { className: "ff-excel-toolbar-text", children: [_jsx(Tooltip, { placement: "top", title: 'Bold', children: _jsx(Icon, { disabled: disable, variant: styleBackend.bold ? 'dark' : 'light', hoverEffect: styleBackend.bold ? false : true, onClick: () => onBold(data), name: "bold" }) }), _jsx(Tooltip, { placement: "top", title: 'Italic', children: _jsx(Icon, { disabled: disable, variant: styleBackend.italic ? 'dark' : 'light', hoverEffect: styleBackend.italic ? false : true, onClick: () => onItalic(data), name: "italic" }) }), _jsx(Tooltip, { placement: "top", title: 'Underline', children: _jsx("div", { className: "ff-excel-toolbar-icon-underline", children: _jsx(Icon, { disabled: disable, variant: cellStyle.textDecoration === 'underline' ? 'dark' : 'light', hoverEffect: cellStyle.textDecoration === 'underline' ? false : true, onClick: () => setUnderlineType(data), name: "underline" }) }) })] }), _jsx("div", { className: "ff-excel-toolbar-divider" }), _jsxs("div", { className: "ff-excel-toolbar-icon", children: [_jsx(Tooltip, { placement: "top", title: 'Format Painter', children: _jsx(Icon, { disabled: disable, variant: formattedStyle ? 'dark' : 'light', hoverEffect: formattedStyle ? false : true, onClick: () => {
                                setFormatePainter(data);
                            }, name: "formate_painter" }) }), _jsx(Tooltip, { placement: "top", title: 'Text Color', children: _jsxs("div", { className: "ff-excel-toolbar-icon-color", children: [_jsx(Icon, { disabled: disable, hoverEffect: true, width: 12, height: 10, onClick: () => {
                                        setColor(data, colorContainer.color);
                                        textColorRef.current?.click();
                                    }, name: "text_color" }), _jsx(ColorBarSelector, { ref: textColorRef, disabled: disable, getColorValue: getTextColor, initialColor: colorContainer.color })] }) }), _jsx(Tooltip, { placement: "top", title: 'Background Color', children: _jsxs("div", { className: "ff-excel-toolbar-icon-color", children: [_jsx(Icon, { disabled: disable, hoverEffect: true, width: 12, height: 10, onClick: () => {
                                        setBackgroundColor(data, colorContainer.backgroundColor);
                                        bgColorRef.current?.click();
                                    }, name: "fill_color" }), _jsx(ColorBarSelector, { ref: bgColorRef, disabled: disable, getColorValue: getBackgroundColor, initialColor: colorContainer.backgroundColor })] }) })] }), _jsx("div", { className: "ff-excel-toolbar-divider" }), _jsx("div", { className: "ff-excel-toolbar-menu", children: _jsxs("div", { className: "ff-excel-toolbar-menu-option", children: [_jsx(Tooltip, { placement: "top", title: 'Border Type', children: _jsx(Icon, { hoverEffect: true, disabled: disable, onClick: () => setBorderType(data, border, 'var(--input-hover-border-color)'), name: getBorderIcon() }) }), _jsx("span", { ref: borderMenuRef, children: _jsx(MenuOption, { disabled: disable, iconName: "arrow_down", targetRef: borderMenuRef, iconSize: 12, zIndex: 2000, options: borderTypeIcon, tooltipTitle: "Border Type", tooltipPlacement: "top", onOptionClick: (e) => {
                                    let selectedValue = e.value;
                                    setBorderType(data, selectedValue, 'var(--input-hover-border-color)');
                                    setBorder(selectedValue);
                                } }) })] }) })] }));
};
export default ExcelToolBar;
//# sourceMappingURL=ExcelToolBar.js.map