// A custom code component by Chris Kellett - Framerverse.com
// Get more components at www.framerverse.com
// Sci-Fi Angled Corner Component for Framer
// Version: 2.4

import React from "react"
import PropTypes from "prop-types"
import { Frame, addPropertyControls, ControlType } from "framer"

/**
 * @framerSupportedLayoutWidth fixed
 * @framerSupportedLayoutHeight fixed
 */
export function Notched(props) {
    const {
        notchSize,
        notchTopLeft,
        notchBottomLeft,
        notchTopRight,
        notchBottomRight,
        fillType,
        color,
        opacity,
        gradientStartColor,
        gradientEndColor,
        gradientAngle,
        gradientType,
        children,
        style,
        ...rest
    } = props
    const sizePx = `${notchSize}px`
    const tl = notchTopLeft ? sizePx : "0px"
    const tr = notchTopRight ? sizePx : "0px"
    const br = notchBottomRight ? sizePx : "0px"
    const bl = notchBottomLeft ? sizePx : "0px"
    const clipPathValue = `polygon(
    ${tl} 0,
    calc(100% - ${tr}) 0,
    100% ${tr},
    100% calc(100% - ${br}),
    calc(100% - ${br}) 100%,
    ${bl} 100%,
    0 calc(100% - ${bl}),
    0 ${tl}
  )`
    const background =
        fillType === "solid"
            ? color
            : gradientType === "linear"
              ? `linear-gradient(${gradientAngle}deg, ${gradientStartColor}, ${gradientEndColor})`
              : `radial-gradient(circle, ${gradientStartColor}, ${gradientEndColor})`
    return (
        <Frame
            {...rest}
            style={{
                ...style,
                width: "100%",
                height: "100%",
                clipPath: clipPathValue,
                background,
                opacity,
            }}
        >
            {children}
        </Frame>
    )
}
Notched.defaultProps = {
    width: 90,
    height: 60,
    color: "#FFFFFF",
    notchSize: 20,
    opacity: 1,
    fillType: "solid",
    gradientStartColor: "#FF0000",
    gradientEndColor: "#0000FF",
    gradientAngle: 0,
    gradientType: "linear",
    notchTopLeft: false,
    notchTopRight: false,
    notchBottomLeft: false,
    notchBottomRight: false,
}
Notched.propTypes = {
    notchSize: PropTypes.number,
    notchTopLeft: PropTypes.bool,
    notchBottomLeft: PropTypes.bool,
    notchTopRight: PropTypes.bool,
    notchBottomRight: PropTypes.bool,
    fillType: PropTypes.oneOf(["solid", "gradient"]),
    color: PropTypes.string,
    opacity: PropTypes.number,
    gradientStartColor: PropTypes.string,
    gradientEndColor: PropTypes.string,
    gradientAngle: PropTypes.number,
    gradientType: PropTypes.oneOf(["linear", "radial"]),
    children: PropTypes.node,
    style: PropTypes.object,
}
addPropertyControls(Notched, {
    fillType: {
        type: ControlType.Enum,
        title: "Fill Type",
        options: ["solid", "gradient"],
        defaultValue: "solid",
    },
    color: {
        type: ControlType.Color,
        title: "Color",
        hidden: (props) => props.fillType === "gradient",
    },
    gradientType: {
        type: ControlType.Enum,
        title: "Gradient Type",
        options: ["linear", "radial"],
        defaultValue: "linear",
        hidden: (props) => props.fillType === "solid",
    },
    gradientEndColor: {
        type: ControlType.Color,
        title: "Gradient End",
        hidden: (props) => props.fillType === "solid",
    },
    gradientStartColor: {
        type: ControlType.Color,
        title: "Gradient Start",
        hidden: (props) => props.fillType === "solid",
    },
    gradientAngle: {
        type: ControlType.Number,
        title: "Gradient Angle",
        min: 0,
        max: 360,
        step: 1,
        hidden: (props) =>
            props.fillType === "solid" || props.gradientType === "radial",
    },
    notchSize: {
        type: ControlType.Number,
        title: "Notch Size",
        min: 0,
        max: 50,
        unit: "px",
        defaultValue: 20,
    },
    notchTopLeft: {
        type: ControlType.Boolean,
        title: "Top Left Notch",
        enabledTitle: "Yes",
        disabledTitle: "No",
        defaultValue: true,
    },
    notchTopRight: {
        type: ControlType.Boolean,
        title: "Top Right Notch",
        enabledTitle: "Yes",
        disabledTitle: "No",
        defaultValue: true,
    },
    notchBottomLeft: {
        type: ControlType.Boolean,
        title: "Bottom Left Notch",
        enabledTitle: "Yes",
        disabledTitle: "No",
        defaultValue: true,
    },
    notchBottomRight: {
        type: ControlType.Boolean,
        title: "Bottom Right Notch",
        enabledTitle: "Yes",
        disabledTitle: "No",
        defaultValue: true,
    },
    opacity: {
        type: ControlType.Number,
        title: "Opacity",
        min: 0,
        max: 1,
        step: 0.01,
        defaultValue: 1,
    },
})