"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
/* eslint-disable @typescript-eslint/no-unused-vars */
const react_1 = __importDefault(require("react"));
const TextInput_1 = require("./TextInput");
const SelectInput_1 = require("./SelectInput");
const SearchInput_1 = require("./SearchInput");
const FileInput_1 = require("./FileInput");
const NumberInput_1 = require("./NumberInput");
const varsUtilities_1 = require("../../varsUtilities");
const Text_1 = require("../Text");
const icons_1 = require("../../icons");
const inlines_1 = require("inlines");
const CheckboxInput_1 = require("./CheckboxInput");
const TextAreaInput_1 = require("./TextAreaInput");
const ColorInput_1 = require("./ColorInput");
const expectNever_1 = require("../../utils/expectNever");
const MultiSelect_1 = require("./MultiSelect");
const RichTextEditor_1 = require("../RichTextEditor");
function Input(props) {
    switch (props.type) {
        case 'text': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { message: props.message, label: props.label, error: props.error },
                react_1.default.createElement(TextInput_1.TextInput, { ...narrowedProps })));
        }
        case 'textarea': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { message: props.message, label: props.label, error: props.error },
                react_1.default.createElement(TextAreaInput_1.TextAreaInput, { ...narrowedProps })));
        }
        case 'search': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { message: props.message, label: props.label, error: props.error },
                react_1.default.createElement(SearchInput_1.SearchInput, { ...narrowedProps })));
        }
        case 'select': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { message: props.message, label: props.label, error: props.error },
                react_1.default.createElement(SelectInput_1.SelectInput, { ...narrowedProps })));
        }
        case 'multi-select': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { message: props.message, label: props.label, error: props.error },
                react_1.default.createElement(MultiSelect_1.MultiSelect, { ...narrowedProps })));
        }
        case 'number': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { message: props.message, label: props.label, error: props.error, description: props.description },
                react_1.default.createElement(NumberInput_1.NumberInput, { ...narrowedProps })));
        }
        case 'color': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { message: props.message, label: props.label, error: props.error },
                react_1.default.createElement(ColorInput_1.ColorInput, { ...narrowedProps })));
        }
        // case 'markdown': {
        //   const { type, ...narrowedProps } = props
        //   return <MarkdownInput {...narrowedProps} />
        // }
        case 'file': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { label: props.label, error: props.error, indent: props.indent, description: props.description },
                react_1.default.createElement(FileInput_1.FileInput, { ...narrowedProps })));
        }
        case 'checkbox': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { label: props.label, error: props.error },
                react_1.default.createElement(CheckboxInput_1.CheckboxInput, { ...narrowedProps })));
        }
        case 'password': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { label: props.label, error: props.error },
                react_1.default.createElement(TextInput_1.TextInput, { ...narrowedProps, password: true })));
        }
        case 'rich-text': {
            const { type, ...narrowedProps } = props;
            return (react_1.default.createElement(LabelAndErrorWrapper, { label: props.label, error: props.error },
                react_1.default.createElement(RichTextEditor_1.RichTextEditor, { ...narrowedProps })));
        }
        default:
            (0, expectNever_1.expectNever)(props);
    }
}
exports.Input = Input;
function LabelAndErrorWrapper({ label, error, children, indent, description, message, }) {
    // TODO: temp change maybe idk how to get this to be a styled div
    // const Component = indent || label || description || error ? 'div' : Fragment
    const componentProps = indent
        ? {
            style: {
                width: '100%',
                display: 'block',
                borderLeft: '2px solid',
                borderColor: error
                    ? (0, varsUtilities_1.color)('border', 'negative', 'strong')
                    : (0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default'),
                '&:hover': {
                    borderColor: error
                        ? (0, varsUtilities_1.color)('border', 'negative', 'strong')
                        : (0, varsUtilities_1.color)('inputBorder', 'neutralHover', 'default'),
                },
                '&:active': {
                    borderColor: error
                        ? (0, varsUtilities_1.color)('border', 'negative', 'strong')
                        : (0, varsUtilities_1.color)('inputBorder', 'neutralActive', 'default'),
                },
                '&:focus': {
                    outline: 'none',
                    borderColor: error
                        ? (0, varsUtilities_1.color)('border', 'negative', 'strong')
                        : (0, varsUtilities_1.color)('inputBorder', 'selected', 'default'),
                    '&:hover': {
                        borderColor: error
                            ? (0, varsUtilities_1.color)('border', 'negative', 'strong')
                            : (0, varsUtilities_1.color)('inputBorder', 'hover', 'default'),
                    },
                    '&:active': {
                        borderColor: error
                            ? (0, varsUtilities_1.color)('border', 'negative', 'strong')
                            : (0, varsUtilities_1.color)('inputBorder', 'active', 'default'),
                    },
                },
                paddingLeft: 20,
            },
        }
        : label || error || description
            ? {
                style: {
                    width: '100%',
                    display: 'block',
                    '&:focus > input': {
                        outline: 'none',
                    },
                },
            }
            : {
                style: {
                    width: '100%',
                    display: 'block',
                    '&:focus': {
                        outline: 'none',
                    },
                },
            };
    // tabIndex={1}
    return (react_1.default.createElement(inlines_1.styled.div, { ...componentProps },
        label && (react_1.default.createElement(Text_1.Text, { weight: "medium", style: {
                marginBottom: 8,
            } }, label)),
        children,
        description && (react_1.default.createElement(inlines_1.styled.div, { style: { marginTop: 8 } },
            react_1.default.createElement(Text_1.Text, { light: true }, description))),
        message && (react_1.default.createElement("div", { style: {
                marginTop: 8,
                display: 'flex',
                alignItems: 'center',
                color: (0, varsUtilities_1.color)('content', error ? 'negative' : 'brand'),
            } },
            error ? react_1.default.createElement(icons_1.IconAlertFill, { color: "inherit" }) : null,
            react_1.default.createElement(Text_1.Text, { style: {
                    marginLeft: 5,
                } }, message)))));
}
//# sourceMappingURL=index.js.map