import FormField, {
    FormFieldComponentProps,
    FormFieldIcon,
    FormFieldPresentationProps,
} from "@insite/mobius/FormField";
import { sizeVariantValues } from "@insite/mobius/FormField/formStyles";
import { IconPresentationProps } from "@insite/mobius/Icon";
import applyPropBuilder from "@insite/mobius/utilities/applyPropBuilder";
import { HasDisablerContext, withDisabler } from "@insite/mobius/utilities/DisablerContext";
import injectCss from "@insite/mobius/utilities/injectCss";
import MobiusStyledComponentProps from "@insite/mobius/utilities/MobiusStyledComponentProps";
import uniqueId from "@insite/mobius/utilities/uniqueId";
import * as React from "react";
import styled from "styled-components";

export interface SpreedlyFramePresentationProps extends FormFieldPresentationProps<SpreedlyFrameComponentProps> {
    /** The props for icon displaying on the text input field.
     * @themable */
    iconProps?: IconPresentationProps;
    /** Background color of the form element */
    backgroundColor?: string;
}

type SpreedlyFrameComponentProps = MobiusStyledComponentProps<
    "div",
    React.InputHTMLAttributes<HTMLInputElement> & {
        /** Error message to be displayed below the input. */
        error?: React.ReactNode;
        /** Hint text to be displayed below the input. */
        hint?: React.ReactNode;
        /** Label to be displayed above the input. */
        label?: React.ReactNode;
        /** The node which contains the iFrame to be rendered as a formfield. Styles must be provided to the frame via config object. */
        spreedlyIFrameContainer: React.ReactNode;
    } & Partial<FormFieldComponentProps>
>;

export type SpreedlyFrameProps = SpreedlyFramePresentationProps & SpreedlyFrameComponentProps;

export interface FrameStyleConfig {
    base: string;
    focus: string;
    error: string;
    cvv: {
        base: string;
        focus: string;
        error: string;
    };
}

const SpreedlyFrameWrapper = styled.div<{ _sizeVariant: keyof typeof sizeVariantValues }>`
    height: ${({ _sizeVariant }) => sizeVariantValues[_sizeVariant].height}px;
    ${injectCss}
`;

const HiddenWrapper = styled.div<{ isHidden: boolean }>`
    display: ${({ isHidden }) => (isHidden ? "none" : "block")};
    height: inherit;
`;

/**
 * A component that accepts a spreedlyIFrameContainer to style as a visually compliant FormField element.
 * NOTE: accessibility on this component is poor due to limitations on passing values to the framed input.
 */
const SpreedlyFrame: React.FC<SpreedlyFrameProps & HasDisablerContext> = ({
    disable,
    disabled,
    id,
    spreedlyIFrameContainer,
    backgroundColor,
    ...otherProps
}) => {
    // Because disabled html attribute doesn't accept undefined
    // eslint-disable-next-line no-unneeded-ternary
    const isDisabled = disable || disabled ? true : false;
    const inputId = id || uniqueId();
    const descriptionId = `${inputId}-description`;
    const hasDescription = !!otherProps.error || !!otherProps.hint;
    const { applyProp, spreadProps } = applyPropBuilder(otherProps, {
        component: "textField",
        category: "formField",
    });
    const sizeVariant = applyProp("sizeVariant", "default") as keyof typeof sizeVariantValues;
    const iconProps = spreadProps("iconProps");
    const labelId = `${inputId}-label`;
    const inputLabelObj = otherProps.label === 0 || otherProps.label ? { "aria-labelledby": labelId } : {};

    const frameComponent = (
        <SpreedlyFrameWrapper
            data-id="frame-wrapper"
            _sizeVariant={sizeVariant}
            aria-describedby={hasDescription ? descriptionId : undefined}
            aria-invalid={!!otherProps.error}
            aria-required={!isDisabled && otherProps.required}
            {...inputLabelObj}
        >
            {isDisabled ? <input disabled /> : null}
            <HiddenWrapper isHidden={isDisabled}>{spreedlyIFrameContainer}</HiddenWrapper>
            {iconProps ? (
                <FormFieldIcon
                    {...iconProps}
                    size={sizeVariantValues[sizeVariant].icon}
                    color={isDisabled ? "text.disabled" : iconProps.color}
                />
            ) : null}
        </SpreedlyFrameWrapper>
    );

    return (
        <FormField
            descriptionId={descriptionId}
            formInput={frameComponent}
            inputId={inputId}
            labelId={labelId}
            disabled={isDisabled}
            backgroundColor={backgroundColor}
            {...(otherProps as any)}
        />
    );
};

/** @component */
export default withDisabler(SpreedlyFrame);
