import React, { useState } from 'react'

import { ModalInline, Box, Label, Button, Modal } from '../..'

const variants = [
  'primary', 'danger', 'success', 'info', 'secondary', 'default', 'light',
]

export const Default: React.FC<any> = (props) => {
  const {
    label,
    icon,
    title,
    variant,
    subTitle,
  } = props
  const [isVisible, setIsVisible] = useState(false)
  const modalProps = {
    label,
    icon,
    title,
    variant,
    subTitle,
    onOverlayClick: () => setIsVisible(false),
    onClose: () => setIsVisible(false),
    buttons: [
      { label: 'Cancel' },
      { label: 'Delete', variant },
    ],
  }

  return (
    <Box variant="grey">
      <Label>Inline modal: ModalInline</Label>
      <Box py="xxl" width={1}>
        <ModalInline {...modalProps} />
      </Box>
      <Box>
        <Label>Modal Trigger</Label>
        <Button
          onClick={() => setIsVisible(!isVisible)}
        >
          Toggle Modal
        </Button>
        {isVisible && <Modal {...modalProps} />}
      </Box>
    </Box>
  )
}

export default {
  title: 'DesignSystem/Molecules/Modal',
  argTypes: {
    variant: {
      defaultValue: variants[0],
      options: variants,
      control: { type: 'select' },
    },
    title: {
      defaultValue: 'Are you sure you want to delete this car?',
      control: { type: 'text' },
    },
    subTitle: {
      defaultValue: 'This item will be deleted immediately. You can’t undo this action.',
      control: { type: 'text' },
    },
    icon: {
      defaultValue: 'Warning',
      control: { type: 'text' },
    },
    label: {
      defaultValue: 'Warning',
      control: { type: 'text' },
    },
  },
}