import React from 'react'
import { storiesOf } from '@storybook/react'

import SidebarToggle from 'src/dashboard-refactor/header/SidebarHeader/SidebarToggle/SidebarToggle'

const stories = storiesOf('Dashboard Refactor|Header/Sidebar Toggle', module)

export const sidebarToggleProps = {
    noHover: {
        sidebarLockedState: {
            toggleSidebarLockedState: function () {},
            isSidebarLocked: false,
        },
        hoverState: {
            onHoverEnter: function () {},
            onHoverLeave: function () {},
            isHovered: false,
        },
    },
    unlockedHover: {
        sidebarLockedState: {
            toggleSidebarLockedState: function () {},
            isSidebarLocked: false,
        },
        hoverState: {
            onHoverEnter: function () {},
            onHoverLeave: function () {},
            isHovered: true,
        },
    },
    lockedHover: {
        sidebarLockedState: {
            toggleSidebarLockedState: function () {},
            isSidebarLocked: true,
        },
        hoverState: {
            onHoverEnter: function () {},
            onHoverLeave: function () {},
            isHovered: true,
        },
    },
}

stories.add('No hover', () => <SidebarToggle {...sidebarToggleProps.noHover} />)
stories.add('Unlocked hover', () => (
    <SidebarToggle {...sidebarToggleProps.unlockedHover} />
))
stories.add('Locked hover', () => (
    <SidebarToggle {...sidebarToggleProps.lockedHover} />
))

import React from 'react'
import { storiesOf } from '@storybook/react'

import SidebarToggle, {
    SidebarToggleProps,
} from 'src/dashboard-refactor/header/SidebarHeader/SidebarToggle/SidebarToggle'
import { SidebarLockedState } from 'src/dashboard-refactor/lists-sidebar/types'
import { HoverState } from 'src/dashboard-refactor/types'

const stories = storiesOf('Dashboard Refactor|Header/Sidebar Toggle', module)

const sidebarLockedState: SidebarLockedState = {
    isSidebarLocked: false,
    toggleSidebarLockedState: () => {},
}

const hoverState: HoverState = {
    isHovered: false,
    onHoverEnter: () => {},
    onHoverLeave: () => {},
}

const template: SidebarToggleProps = {
    sidebarLockedState: sidebarLockedState,
    hoverState: hoverState,
}

export const sidebarToggleProps = {
    noHover: {
        ...template,
    },
    unlockedHover: {
        ...template,
        hoverState: {
            ...hoverState,
            isHovered: true,
        },
    },
    lockedHover: {
        sidebarLockedState: {
            ...sidebarLockedState,
            isSidebarLocked: true,
        },
        hoverState: {
            ...hoverState,
            isHovered: true,
        },
    },
}

stories.add('No hover', () => <SidebarToggle {...sidebarToggleProps.noHover} />)
stories.add('Unlocked hover', () => (
    <SidebarToggle {...sidebarToggleProps.unlockedHover} />
))
stories.add('Locked hover', () => (
    <SidebarToggle {...sidebarToggleProps.lockedHover} />
))

Refactor sidebar toggle story to run off template
Refactor sidebar toggle story to run off template
