import React from "react";
import {map} from "lodash";
import {SelectOption} from "../fields/MultiSelectSearch";
import {fieldMeta} from "../cards";

export const Wrapped = (fieldToRender) => <div
    className="w-full p-6 pt-5 bg-gray-150 bg-opacity-30 rounded-1 border-[2px] border-gray-200 border-opacity-70">
    {fieldToRender}
</div>

export const convertDictToArrayOfOptions = (dict: Record<string, string>, flipped: boolean) => {
    if (Array.isArray(dict)) {
        return dict
    }

    return map(dict, (value, label) => ({
        id: flipped ? label : value,
        name: flipped ? value : label,
        label,
    }))
}

/**
 * For use in the MultiSelectSearch component with the .meta of a component
 */
export const mapLocalMetaFieldOptions = <Option = SelectOption>(options: fieldMeta['_allowed']) => map(options, (key: string, label) => {
    return {
        id: key,
        label,
        value: label
    } as Option
})