import {DownOutlined} from "@ant-design/icons";
import {Dropdown} from "antd";
import React from "react";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {createStructuredSelector} from "reselect";
import {selectBodyshop} from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
    //currentUser: selectCurrentUser
    bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
    //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function JoblinePresetButton({bodyshop, form}) {
    const {t} = useTranslation();

    const handleSelect = (item) => {
        form.setFieldsValue(item);
    };


    const menu = {
        items: bodyshop.md_jobline_presets.map((i, idx) => ({
            key: idx,
            label: i.label,
            style: {breakInside: "avoid"},
            onClick: () => handleSelect(i),
        })),
        style: {
            columnCount: Math.max(
                Math.floor(bodyshop.md_jobline_presets.length / 15),
                1
            ),
        },
    }

    return (
        <div>
            <Dropdown trigger={["click"]} menu={menu}>
                <a
                    className="ant-dropdown-link"
                    href="# "
                    onClick={(e) => e.preventDefault()}
                >
                    {t("joblines.labels.presets")} <DownOutlined/>
                </a>
            </Dropdown>
        </div>
    );
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(JoblinePresetButton);