import * as React from "react"
import {
    PropertyControls,
    Frame,
    addPropertyControls,
    ControlType,
} from "framer"

// Responsive Layout Component
// @steveruizok

type Child = React.ReactElement<any>

const defaultStyle: React.CSSProperties = {
    height: "100%",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    color: "#333",
    fontSize: "3em",
    fontWeight: "bold",
    background: "rgba(255, 255, 255, 1)",
    border: "2px solid #eee",
    borderRadius: "2px",
    overflow: "hidden",
    padding: "16px",
}

const DefaultDisplay = props => (
    <div style={defaultStyle}>
        <p>R</p>
    </div>
)

// Define type of property
interface Props {
    layouts: Child[]
    height: number
    width: number
}

export const ResponsiveLayout = props => {
    const container = React.useRef<HTMLDivElement>()

    const [state, setState] = React.useState({
        height: props.height,
        width: props.width,
    })

    const getLayout = width => {
        const { layouts } = props

        const ls = [...layouts]

        if (ls.length === 1) return ls[0]

        // Sort filtered layouts
        const sorted = ls.sort((a, b) => a.props.width - b.props.width)

        console.log(sorted.map(f => f.props.width))

        // Filter sorted to only those that fit under this component's width
        const filtered = sorted.filter((l: Child) => {
            // console.log(width, l.props.width)
            return l.props.width < width
        })

        // if nothing fits, return the most narrow layout
        if (filtered.length === 0) 


        // otherwise, return the largest layout among those that fit
        return filtered[filtered.length - 1]
    }

    const updateLayout = () => {
        if (!container.current) {
            return
        }

        const width = container.current.offsetWidth

        setState({
            ...state,
            width,
        })
    }

    React.useEffect(() => {
        updateLayout()
        window.addEventListener("resize", updateLayout)
        return () => window.removeEventListener("resize", updateLayout)
    }, [])

    React.useEffect(() => {
        updateLayout()
    }, [props.height, props.width, container.current])

    const { layouts } = props

    // If we don't have layouts, use the default display.
    if (layouts.length === 0) {
        return <DefaultDisplay />
    }

    const { width } = state
    const l = getLayout(width)
    const layout = React.cloneElement(l, {
        width: "100%",
        height: "100%",
    })

    // Now that element to fill this frame's frame (frame frame... framer)
    return (
        <Frame ref={container} width="100%" height="100%">
            {layout}
        </Frame>
    )
}

addPropertyControls(ResponsiveLayout, {
    layouts: {
        type: ControlType.Array,
        title: "Layouts",
        propertyControl: {
            type: ControlType.ComponentInstance,
        },
    },
})

{
            return sorted[0]
        }