import React from "react";
import Button from "../components/parts/Button";
import Flex from "../components/layout/Flex";
import { UseState } from "./helpers";
import Fill from "./Fill";
import Wrap from "./Wrap";
import GridCol from "../components/layout/GridCol";
import Knobs from "./Knobs";

export default {
    title: "Grid"
};

export const GridColumn = () => (
    <UseState
        initialValue={{ pad: "medium", gap: "medium", stretch: false, count: 3 }}
        render={(settings, setSettings) => (
            <Wrap>
                <Flex direction="vertical" gap="medium" stretch>
                    <Flex direction="vertical" gap="medium" shrink>
                        <Flex shrink hAlignment="center" gap="medium">
                            <Knobs
                                title="Gap"
                                currentValue={settings.gap}
                                knobs={[
                                    {
                                        name: "none",
                                        value: "",
                                        setKnob: value => setSettings({ ...settings, gap: value })
                                    },
                                    {
                                        name: "Small",
                                        value: "small",
                                        setKnob: value => setSettings({ ...settings, gap: value })
                                    },
                                    {
                                        name: "Medium",
                                        value: "medium",
                                        setKnob: value => setSettings({ ...settings, gap: value })
                                    },
                                    {
                                        name: "Large",
                                        value: "large",
                                        setKnob: value => setSettings({ ...settings, gap: value })
                                    }
                                ]}
                            />
                            <Knobs
                                title="Pad"
                                currentValue={settings.pad}
                                knobs={[
                                    {
                                        name: "none",
                                        value: "",
                                        setKnob: value => setSettings({ ...settings, pad: value })
                                    },
                                    {
                                        name: "Small",
                                        value: "small",
                                        setKnob: value => setSettings({ ...settings, pad: value })
                                    },
                                    {
                                        name: "Medium",
                                        value: "medium",
                                        setKnob: value => setSettings({ ...settings, pad: value })
                                    },
                                    {
                                        name: "Large",
                                        value: "large",
                                        setKnob: value => setSettings({ ...settings, pad: value })
                                    }
                                ]}
                            />
                        </Flex>
                        <Flex shrink hAlignment="center" gap="medium">
                            <Knobs
                                title="Columns"
                                currentValue={settings.count}
                                knobs={[
                                    {
                                        name: "1",
                                        value: 1,
                                        setKnob: value => setSettings({ ...settings, count: value })
                                    },
                                    {
                                        name: "2",
                                        value: 2,
                                        setKnob: value => setSettings({ ...settings, count: value })
                                    },
                                    {
                                        name: "3",
                                        value: 3,
                                        setKnob: value => setSettings({ ...settings, count: value })
                                    },
                                    {
                                        name: "4",
                                        value: 4,
                                        setKnob: value => setSettings({ ...settings, count: value })
                                    }
                                ]}
                            />
                            <Knobs
                                title="Stretch"
                                currentValue={settings.stretch}
                                knobs={[
                                    {
                                        name: "true",
                                        value: true,
                                        setKnob: value =>
                                            setSettings({ ...settings, stretch: value })
                                    },
                                    {
                                        name: "false",
                                        value: false,
                                        setKnob: value =>
                                            setSettings({ ...settings, stretch: value })
                                    }
                                ]}
                            />
                        </Flex>
                    </Flex>


                    <GridCol
                        columnCount={settings.count}
                        gap={settings.gap}
                        pad={settings.pad}
                        stretch={settings.stretch}
                    >
                        <Fill>CELL</Fill>
                        <Fill>CELL</Fill>
                        <Fill>CELL</Fill>
                        <Fill>CELL</Fill>
                        <Fill>CELL</Fill>
                        <Fill>CELL</Fill>
                    </GridCol>
                </Flex>
            </Wrap>
        )}
    />
);