import React from "react";
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 Button from "../components/parts/Button";
import Knobs from "./Knobs";

export default {
    title: "Flex"
};

export const Default = () => (
    <UseState
        initialValue={0}
        render={(counter, setCounter) => (
            <Wrap>
                <Flex pad="medium" gap="medium">
                    <Fill>⚡</Fill>
                    <Fill>⚡</Fill>
                    <Fill>⚡</Fill>
                </Flex>
            </Wrap>
        )}
    />
);

export const Styles = () => (
    <UseState
        initialValue={0}
        render={(counter, setCounter) => (
            <Wrap>
                <Flex style={{
                    outline: '10px solid gold'
                }} pad="medium" gap="medium">
                    <Fill>⚡</Fill>
                    <Fill>⚡</Fill>
                    <Fill>⚡</Fill>
                </Flex>
            </Wrap>
        )}
    />
);

export const Stretch = () => (
    <UseState
        initialValue={0}
        render={(counter, setCounter) => (
            <Wrap>
                <Flex pad="medium" gap="medium">
                    <Flex pad="medium" fill="highlight">
                        <Fill>STRETCH</Fill>
                    </Flex>
                    <Fill>⚡</Fill>
                    <Fill>⚡</Fill>
                </Flex>
            </Wrap>
        )}
    />
);

export const GroupStretch = () => (
    <UseState
        initialValue={0}
        render={(counter, setCounter) => (
            <Wrap>
                <Flex stretch pad="medium" gap="medium">
                    <Fill>⚡</Fill>
                    <Fill>⚡</Fill>
                    <Fill>⚡</Fill>
                </Flex>
            </Wrap>
        )}
    />
);

export const ShrinkFlexFlex = () => (
    <UseState
        initialValue={0}
        render={(counter, setCounter) => (
            <Wrap>
                <Flex stretch pad="medium" gap="medium">
                    <Flex fill="highlight" shrink>
                        <Fill>SHRINK</Fill>
                    </Flex>
                    <Flex stretch>
                        <Fill>FLEX</Fill>
                    </Flex>
                    <Flex stretch>
                        <Fill>FLEX</Fill>
                    </Flex>
                </Flex>
            </Wrap>
        )}
    />
);

export const DirectionHorizontal = () => (
    <UseState
        initialValue={""}
        render={(vAlignment, setVAlignment) => (
            <Wrap>
                <Flex direction="vertical"  stretch>


                    <Knobs title="V Align" currentValue={vAlignment} knobs={[
                        {
                            name: 'none',
                            value: '',
                            setKnob: setVAlignment
                        },
                        {
                            name: 'Top',
                            value: 'top',
                            setKnob: setVAlignment
                        },
                        {
                            name: 'Middle',
                            value: 'middle',
                            setKnob: setVAlignment
                        },
                        {
                            name: 'Bottom',
                            value: 'bottom',
                            setKnob: setVAlignment
                        }
                    ]}/>
                    

                    <GridCol stretch columnCount={3} gap="medium">
                        <Flex pad="medium" gap="medium" vAlignment={vAlignment} hAlignment="left">
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex pad="medium" gap="medium" vAlignment={vAlignment} hAlignment="center">
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex pad="medium" gap="medium" vAlignment={vAlignment} hAlignment="right">
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>

                        <Flex
                            pad="medium"
                            gap="medium"
                            vAlignment={vAlignment}
                            hAlignment="between"
                        >
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex pad="medium" gap="medium" vAlignment={vAlignment} hAlignment="around">
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex pad="medium" gap="medium" vAlignment={vAlignment} hAlignment="evenly">
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                    </GridCol>
                </Flex>
            </Wrap>
        )}
    />
);

export const Direction_Vertical = () => (
    <UseState
        initialValue={""}
        render={(hAlignment, setHAlignment) => (
            <Wrap>
                <Flex direction="vertical">
                    <Knobs title="H Alignment" currentValue={hAlignment} knobs={[
                        {
                            name: 'none',
                            value: '',
                            setKnob: setHAlignment
                        },
                        {
                            name: 'Left',
                            value: 'left',
                            setKnob: setHAlignment
                        },
                        {
                            name: 'Center',
                            value: 'center',
                            setKnob: setHAlignment
                        },
                        {
                            name: 'Right',
                            value: 'right',
                            setKnob: setHAlignment
                        }
                    ]}/>
                    <Flex>
                        <Flex
                            pad="medium"
                            gap="medium"
                            direction="vertical"
                            vAlignment="top"
                            hAlignment={hAlignment}
                        >
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex
                            pad="medium"
                            gap="medium"
                            direction="vertical"
                            vAlignment="middle"
                            hAlignment={hAlignment}
                        >
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex
                            pad="medium"
                            gap="medium"
                            direction="vertical"
                            vAlignment="bottom"
                            hAlignment={hAlignment}
                        >
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex
                            pad="medium"
                            gap="medium"
                            direction="vertical"
                            vAlignment="between"
                            hAlignment={hAlignment}
                        >
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex
                            pad="medium"
                            gap="medium"
                            direction="vertical"
                            vAlignment="around"
                            hAlignment={hAlignment}
                        >
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                        <Flex
                            pad="medium"
                            gap="medium"
                            direction="vertical"
                            vAlignment="evenly"
                            hAlignment={hAlignment}
                        >
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                            <Fill>⚡</Fill>
                        </Flex>
                    </Flex>
                </Flex>
            </Wrap>
        )}
    />
);

export const GapAndPad = () => (
    <UseState
        initialValue={{ pad: "medium", gap: "medium" }}
        render={(settings, setSettings) => (
            <Wrap>
                <Flex direction="vertical">
                    <Flex shrink hAlignment="center" pad="medium"  gap="medium">
                        <Knobs title="Gap" currentValue={settings.gap} knobs={[
                            {
                                name: 'none',
                                value: '',
                                setKnob: (value) => setSettings({ gap: value, pad: settings.pad })
                            },
                            {
                                name: 'Small',
                                value: 'small',
                                setKnob: (value) => setSettings({ gap:value, pad: settings.pad })
                            },
                            {
                                name: 'Medium',
                                value: 'medium',
                                setKnob: (value) => setSettings({ gap: value, pad: settings.pad })
                            },
                            {
                                name: 'Large',
                                value: 'large',
                                setKnob: (value) => setSettings({ gap: value, pad: settings.pad })
                            }
                        ]}/>
                        <Knobs title="Pad" currentValue={settings.pad} knobs={[
                            {
                                name: 'none',
                                value: '',
                                setKnob: (value) => setSettings({ gap: settings.gap, pad: value })
                            },
                            {
                                name: 'Small',
                                value: 'small',
                                setKnob: (value) => setSettings({ gap: settings.gap, pad: value })
                            },
                            {
                                name: 'Medium',
                                value: 'medium',
                                setKnob: (value) => setSettings({ gap: settings.gap, pad: value })
                            },
                            {
                                name: 'Large',
                                value: 'large',
                                setKnob: (value) => setSettings({ gap: settings.gap, pad: value })
                            }
                        ]}/>                       
                    </Flex>

                    <Flex pad={settings.pad} gap={settings.gap}>
                        <Fill>⚡</Fill>
                        <Fill>⚡</Fill>
                        <Fill>⚡</Fill>
                    </Flex>
                </Flex>
            </Wrap>
        )}
    />
);