import { Select, Tooltip } from "antd";
import PropTypes from "prop-types";
import { ViewModPropType } from "../../../Types/viewModPropType.js";
import useSelectViewModeUI from "./useSelectViewModeUI.js";

const { Option } = Select;

const SelectViewMode = ({ viewMode, setViewMode, localStorageKey, toolTipText, viewModes }) => {
    const { selectStyle, handleChange } = useSelectViewModeUI({ setViewMode, localStorageKey });

    return (
        <Tooltip title={toolTipText}>
            <Select value={viewMode} onChange={handleChange} style={selectStyle}>
                {viewModes.map((viewMode) => (
                    <Option key={viewMode.value} value={viewMode.value}>
                        {viewMode.icon}
                        {viewMode.label}
                    </Option>
                ))}
            </Select>
        </Tooltip>
    );
};

SelectViewMode.propTypes = {
    viewMode: PropTypes.string.isRequired,
    setViewMode: PropTypes.func.isRequired,
    localStorageKey: PropTypes.string.isRequired,
    toolTipText: PropTypes.string.isRequired,
    viewModes: PropTypes.arrayOf(ViewModPropType).isRequired,
};

export default SelectViewMode;