import Tab, { TabProps } from "@insite/mobius/Tab";
import TabGroup from "@insite/mobius/TabGroup";
import TextField from "@insite/mobius/TextField";
import Typography from "@insite/mobius/Typography";
import getColor from "@insite/mobius/utilities/getColor";
import CheckboxConfig from "@insite/shell/Components/Shell/StyleGuide/CheckboxConfig";
import ColorPickerConfig from "@insite/shell/Components/Shell/StyleGuide/ColorPickerConfig";
import ConfigMenu from "@insite/shell/Components/Shell/StyleGuide/ConfigMenu";
import SelectConfig from "@insite/shell/Components/Shell/StyleGuide/SelectConfig";
import {
    configHeaderFormFieldStyles,
    configHeaderFormFieldStylesExtraMargin,
} from "@insite/shell/Components/Shell/StyleGuide/Styles";
import { PresetHelpers } from "@insite/shell/Components/Shell/StyleGuide/Types";
import { TS } from "@insite/shell/TS";
import React from "react";
import { css } from "styled-components";

const tabGroupCssOverrides = {
    wrapper: css`
        padding: 0;
    `,
    tabContent: css`
        border: none;
        padding: 10px 0 0 0;
    `,
};

const tabCss = css`
    padding: 4px;
    border-bottom: 2px solid ${({ selected }: TabProps) => (selected ? getColor("custom.activeBorder") : "transparent")};
    &:hover {
        border-bottom: 2px solid ${getColor("custom.activeBorder")};
        cursor: pointer;
    }

    && {
        outline: none;
    }
`;

const CompactHeader = (props: PresetHelpers) => {
    const { triggerPoint, borderThickness, isCompactHeader, isDropShadow, isBorder, padding } = props.theme.header;

    return (
        <ConfigMenu title={TS("Compact Header")} insideForm={false}>
            <CheckboxConfig locationInTheme="header.isCompactHeader" title="Enable Compact Header" {...props} />
            <Typography
                as="h2"
                css={css`
                    font-size: 20px;
                    font-weight: 500;
                    margin: 0;
                `}
            >
                Compact Header Styles
            </Typography>
            {isCompactHeader && (
                <TabGroup current="general" cssOverrides={tabGroupCssOverrides}>
                    <Tab headline="General" tabKey="general" css={tabCss}>
                        <TextField
                            label="Compact Header Trigger Point (px)"
                            value={triggerPoint}
                            onChange={(e: any) => {
                                const { update } = props;
                                update((draft: any) => {
                                    if (e.target.value === "") {
                                        draft.header.triggerPoint = e.target.value;
                                        return;
                                    }
                                    const newVal = parseInt(e.target.value, 10);
                                    // eslint-disable-next-line no-restricted-globals
                                    if (isNaN(newVal)) {
                                        return;
                                    }
                                    draft.header.triggerPoint = newVal;
                                });
                            }}
                            {...configHeaderFormFieldStylesExtraMargin}
                        />
                        <TextField
                            label="Padding (px)"
                            value={padding}
                            onChange={(e: any) => {
                                const { update } = props;
                                update((draft: any) => {
                                    if (e.target.value === "") {
                                        draft.header.padding = e.target.value;
                                        return;
                                    }
                                    const newVal = parseInt(e.target.value, 10);
                                    // eslint-disable-next-line no-restricted-globals
                                    if (isNaN(newVal)) {
                                        return;
                                    }
                                    draft.header.padding = newVal;
                                });
                            }}
                            {...configHeaderFormFieldStyles}
                        />
                        <ColorPickerConfig
                            firstInput
                            locationInTheme="header.backgroundColor"
                            title="Background Color"
                            id="header-background-color"
                            {...props}
                        />
                        <ColorPickerConfig
                            firstInput
                            locationInTheme="header.linkColor"
                            title="Link Color"
                            id="header-link-color"
                            {...props}
                        />
                    </Tab>
                    <Tab headline="Drop Shadow" tabKey="dropShadow" css={tabCss}>
                        <CheckboxConfig locationInTheme="header.isDropShadow" title="Enable Drop Shadow" {...props} />

                        {isDropShadow && (
                            <>
                                <SelectConfig
                                    title="Shadow Style"
                                    locationInTheme="header.dropShadowStyle"
                                    {...props}
                                    css={css`
                                        &&& {
                                            border-radius: 3px;
                                        }
                                    `}
                                >
                                    <option value="" hidden disabled></option>
                                    <option value="light">Light</option>
                                    <option value="medium">Medium</option>
                                    <option value="dark">Dark</option>
                                </SelectConfig>
                            </>
                        )}
                    </Tab>
                    <Tab headline="Border" tabKey="border" css={tabCss}>
                        <CheckboxConfig locationInTheme="header.isBorder" title="Enable Border" {...props} />
                        {isBorder && (
                            <>
                                <ColorPickerConfig
                                    firstInput
                                    locationInTheme="header.borderColor"
                                    title="Color"
                                    id="header-border-color"
                                    {...props}
                                />
                                <TextField
                                    label="Thickness (px)"
                                    value={borderThickness}
                                    onChange={(e: any) => {
                                        const { update } = props;
                                        update((draft: any) => {
                                            if (e.target.value === "") {
                                                draft.header.borderThickness = e.target.value;
                                                return;
                                            }
                                            const newVal = parseInt(e.target.value, 10);
                                            // eslint-disable-next-line no-restricted-globals
                                            if (isNaN(newVal)) {
                                                return;
                                            }
                                            draft.header.borderThickness = newVal;
                                        });
                                    }}
                                    {...configHeaderFormFieldStyles}
                                />
                                <Typography as="p" weight={600}>
                                    Border Location
                                </Typography>
                                <CheckboxConfig locationInTheme="header.isBorderTop" title="Top" {...props} />
                                <CheckboxConfig locationInTheme="header.isBorderRight" title="Right" {...props} />
                                <CheckboxConfig locationInTheme="header.isBorderBottom" title="Bottom" {...props} />
                                <CheckboxConfig locationInTheme="header.isBorderLeft" title="Left" {...props} />
                            </>
                        )}
                    </Tab>
                </TabGroup>
            )}
        </ConfigMenu>
    );
};

export default function HeaderConfig(props: PresetHelpers) {
    return <CompactHeader {...props} />;
}
