import React, { useCallback } from "react"
import { Meta, StoryFn } from "@storybook/react-webpack5"
import { Search, SearchProps } from "./Search"
import { useArgs, useState } from "storybook/preview-api"

export default {
    title: "molecules/Search",
    component: Search,
    argTypes: {},
    parameters: {
        backgrounds: {
            default: "light",
            values: [
                { name: "light", value: "#ffffff" },
                { name: "dark", value: "#333333" },
                { name: "gradient-small", value: "var(--bs-blue-gradient)" },
                { name: "gradient-tall", value: "var(--bs-blue-gradient)" },
            ],
        },
    },
} as Meta

const Template: StoryFn<SearchProps> = (args) => {
    return <Search {...args} />
}

const DemoTemplate: StoryFn<SearchProps> = ({ value, onChange, onSearch, ...args }) => {
    const [_, updateArgs] = useArgs()
    const [internalValue, setInternalValue] = useState("")
    const handleSearch = (val: any) => {
        alert(`onChange value: ${val}`)
    }

    const handleChange = useCallback((newValue: string) => {
        setInternalValue(newValue)
        updateArgs({ value: newValue })
    }, [])

    return (
        <>
            <Search {...args} value={internalValue} onChange={handleChange} onSearch={handleSearch} />
            <div>value: {value}</div>
        </>
    )
}

export const _DefaultSearch = DemoTemplate.bind({})
_DefaultSearch.args = {
    className: "",
}

export const _MutedSearch = Template.bind({})
_MutedSearch.args = {
    className: "search-muted",
}
_MutedSearch.parameters = {
    backgrounds: { default: "gradient-small" },
    layout: "centered",
}

export const _MonochromaticSearch = Template.bind({})
_MonochromaticSearch.args = {
    className: "search-monochromatic my-5",
}
_MonochromaticSearch.parameters = {
    backgrounds: { default: "gradient-tall" },
    layout: "centered",
}