var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isEqual } from "lodash";
import { Controller, get, useFormContext } from "react-hook-form";
import Select from "react-select";
import CreatableSelect from "react-select/creatable";
import styled from "styled-components";
import { theme } from "../../../../css/globalStyle";
import { Description, Label, LabelContainer, Title, FieldErrMessage } from "../../TextField";
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: 0.5rem 0;\n"], ["\n  width: 100%;\n  margin: 0.5rem 0;\n"])));
var selectStyle = {
    control: function (styles, _a) {
        var isFocused = _a.isFocused, width = _a.selectProps.width;
        return (__assign(__assign({}, styles), { padding: "5px 8px", borderColor: isFocused ? theme.color.primary[500] : "#e5e5e5", textTransform: "capitalize", transition: "box-shadow 200ms", boxShadow: isFocused && "0 0 0 4px rgb(3, 165, 150, 30%)", width: width || "100%", "&:hover": {
                boxShadow: "0 0 0 4px rgb(3, 165, 150, 30%)"
            } }));
    },
    option: function (styles, _a) {
        var data = _a.data, isSelected = _a.isSelected, isDisabled = _a.isDisabled, isFocused = _a.isFocused, isHovered = _a.isHovered;
        function backgroundColor() {
            if (isSelected)
                return theme.color.primary[100];
            if (isFocused || isHovered)
                return theme.color.grey[100];
            return "#fff";
        }
        return __assign(__assign({}, styles), { display: "flex", alignItems: "center", minHeight: "30px", backgroundColor: backgroundColor(), color: isDisabled ? theme.color.grey[600] : data.color });
    },
    singleValue: function (styles) {
        return __assign(__assign({}, styles), { height: "100%", width: "100%", display: "flex", alignItems: "center" });
    },
    menuPortal: function (styles) { return (__assign(__assign({}, styles), { zIndex: 9999 })); }
};
/**
 * Select component that can be used in forms. Now no longer needs to be wrapped in StandardFormField
 * @returns JSX.Element
 */
export var StandardFormSelect = function (_a) {
    var isMulti = _a.isMulti, isCreatable = _a.isCreatable, options = _a.options, name = _a.name, menuPlacement = _a.menuPlacement, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, title = _a.title, description = _a.description;
    var _c = useFormContext(), control = _c.control, errors = _c.formState.errors;
    // Get error message based on field name
    var error = get(errors, name);
    function handleChange(onChange, options) {
        if (Array.isArray(options)) {
            var result = options.map(function (option) { return option.value; });
            return onChange(result);
        }
        onChange(options.value);
    }
    // Get the initial values from the options
    function getValue(value) {
        // 0 is a valid value but considered falsey in JavaScript so need to exclude it.
        if (value !== 0 && !value)
            return;
        if (isMulti) {
            return options.reduce(function (acc, option) {
                value.forEach(function (value) {
                    if (isEqual(value, option.value)) {
                        acc.push(option);
                    }
                });
                return acc;
            }, []);
        }
        return options.find(function (option) { return option.value === value; });
    }
    // If it is a multi select we filter out all the options that are already selected
    function filterOptions(options, value) {
        if (isMulti) {
            options.filter(function (option) { return option.value !== value; });
        }
        return options;
    }
    return (_jsxs(Container, { children: [_jsxs(Title, { children: [_jsx(LabelContainer, { children: _jsx(Label, __assign({ htmlFor: name }, { children: title })) }), description && _jsx(Description, { children: description })] }), _jsx(Controller, { render: function (_a) {
                    var _b = _a.field, value = _b.value, onChange = _b.onChange;
                    /*
                     * Currently allergens are the only value we are passing that are not a string.
                     * Old allergen values have comment set to NULL which is causing the select to not render them.
                     * This maps through any of the allergen values and changes the comment to "" if it is null.
                     */
                    if (Array.isArray(value) && typeof value[0] === "object") {
                        value.forEach(function (v) {
                            if (v.comment === null) {
                                v.comment = "";
                            }
                            return v;
                        });
                    }
                    return isCreatable ? (_jsx(CreatableSelect, { onChange: function (options) { return handleChange(onChange, options); }, options: filterOptions(options, value), styles: selectStyle, isMulti: isMulti, menuPlacement: menuPlacement || "auto", value: getValue(value), menuPortalTarget: document.body, menuShouldBlockScroll: true, isDisabled: isDisabled })) : (_jsx(Select, { onChange: function (options) { return handleChange(onChange, options); }, options: filterOptions(options, value), styles: selectStyle, isMulti: isMulti, menuPlacement: menuPlacement || "auto", value: getValue(value), menuPortalTarget: document.body, menuShouldBlockScroll: true, isDisabled: isDisabled }));
                }, control: control, name: name }), error && _jsx(FieldErrMessage, { children: error.message })] }));
};
var templateObject_1;
//# sourceMappingURL=index.js.map