import { addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"
import { cloneElement } from "react"

function scrollToTop() {
    if (window) {
        window.scrollTo({ top: 0, behavior: "smooth" })
    }
}

/**
 * @framerSupportedLayoutWidth any-prefer-fixed
 * @framerSupportedLayoutHeight any-prefer-fixed
 * @framerIntrinsicWidth 40
 * @framerIntrinsicHeight 40
 */
export default function ScrollToTopButton(props) {
    let button
    if (props.buttonType == "default") {
        button = (
            <div
                style={{
                    width: props.buttonWidth,
                    height: props.buttonHeight,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    backgroundColor: props.fill,
                    borderRadius: props.radiusIsMixed
                        ? `${props.radiusTopLeft}px ${props.radiusTopRight}px ${props.radiusBottomRight}px ${props.radiusBottomLeft}px`
                        : `${props.radius}px`,
                    ...props.style,
                }}
                onClick={scrollToTop}
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    strokeWidth={props.icon.stroke}
                    stroke={props.icon.color}
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style={{
                        width: props.icon.size,
                        height: props.icon.size,
                    }}
                >
                    <path d="M12 5l0 14"></path>
                    <path d="M18 11l-6 -6"></path>
                    <path d="M6 11l6 -6"></path>
                </svg>
            </div>
        )
    } else {
        let layer = props.custom?.[0]
        if (layer && (props.style?.width || props.style?.height)) {
            layer = cloneElement(layer, {
                style: {
                    ...layer.props.style,
                    ...props.style,
                },
            })
        }
        button = (
            <div onClick={scrollToTop} style={props.style}>
                {layer}
            </div>
        )
    }

    let layer = button
    if (props.effects) {
        layer = (
            <motion.div
                whileHover={{ scale: props.effects.hoverScale }}
                whileTap={{ scale: props.effects.pressScale }}
                initial={false}
                transition={props.effects.transition}
                style={props.style}
            >
                {button}
            </motion.div>
        )
    }

    return layer
}

ScrollToTopButton.displayName = "Scroll-to-Top Button"

const effectsDefault = {
    hoverScale: 1.1,
    pressScale: 0.9,
}

addPropertyControls(ScrollToTopButton, {
    buttonType: {
        type: ControlType.Enum,
        defaultValue: "default",
        options: ["default", "custom"],
        optionTitles: ["Default", "Custom"],
        displaySegmentedControl: true,
        title: "Button",
    },
    custom: {
        type: ControlType.ComponentInstance,
        title: "Custom",
        description: "Use a custom button layer.",
        hidden(props) {
            return props.buttonType !== "custom"
        },
    },
    fill: {
        type: ControlType.Color,
        defaultValue: "#EDEDED",
        optional: true,
        hidden(props) {
            return props.buttonType !== "default"
        },
    },
    icon: {
        type: ControlType.Object,
        controls: {
            color: {
                type: ControlType.Color,
                defaultValue: "black",
            },
            size: {
                type: ControlType.Number,
                defaultValue: 24,
                min: 1,
            },
            stroke: {
                type: ControlType.Number,
                defaultValue: 2,
                min: 1,
                max: 10,
                step: 0.1,
            },
        },
        hidden(props) {
            return props.buttonType !== "default"
        },
    },
    radius: {
        type: ControlType.FusedNumber,
        defaultValue: 20,
        toggleKey: "radiusIsMixed",
        toggleTitles: ["All", "Individual"],
        valueKeys: [
            "radiusTopLeft",
            "radiusTopRight",
            "radiusottomRight",
            "radiusBottomLeft",
        ],
        valueLabels: ["TL", "TR", "BR", "BL"],
        min: 0,
        hidden(props) {
            return props.buttonType !== "default"
        },
    },
    effects: {
        type: ControlType.Object,
        defaultValue: effectsDefault,
        optional: true,
        buttonTitle: "Hover & Press",
        icon: "effect",
        controls: {
            hoverScale: {
                type: ControlType.Number,
                defaultValue: effectsDefault.hoverScale,
                min: 0,
                step: 0.01,
                displayStepper: true,
            },
            pressScale: {
                type: ControlType.Number,
                defaultValue: effectsDefault.pressScale,
                min: 0,
                step: 0.01,
                displayStepper: true,
            },
            transition: {
                type: ControlType.Transition,
            },
        },
    },
})