import React, { useState } from 'react';
import { Meta } from '@storybook/react/types-6-0';
import { Button } from '../Button';
import { Grid } from '../Grid';
import { Snackbar, SnackbarProps } from '.';

export default {
  title: 'Snackbar',
  component: Snackbar,
  argTypes: {
    onDismiss: { action: 'dismissed' },
  },
} as Meta;

export function Default(args: SnackbarProps) {
  return (
    <Snackbar
      details="This Snackbar will be automatically dismissed in 10 seconds."
      {...args}
    />
  );
}

export function Examples() {
  const [successDetails, setSuccessDetails] = useState('');
  const [infoDetails, setInfoDetails] = useState('');
  const [warningDetails, setWarningDetails] = useState('');
  const [alertDetails, setAlertDetails] = useState('');
  const [nonDismissibleDetails, setNonDismissibleDetails] = useState('');
  const [persistentDetails, setPersistentDetails] = useState('');
  const [topLeftDetails, setTopLeftDetails] = useState('');
  const [topRightDetails, setTopRightDetails] = useState('');

  return (
    <>
      <Grid gridTemplateColumns="repeat(4, 1fr)">
        <Button onClick={() => setSuccessDetails('Success!')}>Success</Button>
        <Button onClick={() => setInfoDetails('Information.')}>Info</Button>
        <Button onClick={() => setWarningDetails('A warning message.')}>
          Warning
        </Button>
        <Button onClick={() => setAlertDetails('This is an alert')}>
          Alert
        </Button>
        <Button onClick={() => setNonDismissibleDetails('No buttons!')}>
          Non Dismissible
        </Button>
        <Button
          onClick={() => setPersistentDetails('I will be here until dismissed')}
        >
          Persist until dismissed
        </Button>
        <Button onClick={() => setTopLeftDetails('Over here!')}>
          Top left
        </Button>
        <Button onClick={() => setTopRightDetails('Over here!')}>
          Top right
        </Button>
      </Grid>

      <Snackbar
        variant="success"
        details={successDetails}
        timer={2000}
        onDismiss={() => setSuccessDetails('')}
      />

      <Snackbar
        variant="info"
        details={infoDetails}
        timer={2000}
        onDismiss={() => setInfoDetails('')}
      />

      <Snackbar
        variant="warning"
        details={warningDetails}
        timer={4000}
        onDismiss={() => setWarningDetails('')}
      />

      <Snackbar
        variant="alert"
        details={alertDetails}
        timer={2000}
        onDismiss={() => setAlertDetails('')}
      />

      <Snackbar
        dismissible={false}
        details={nonDismissibleDetails}
        timer={2000}
        onDismiss={() => setNonDismissibleDetails('')}
      />

      <Snackbar
        details={persistentDetails}
        timer={null}
        onDismiss={() => setPersistentDetails('')}
      />

      <Snackbar
        variant="success"
        position="left"
        details={topLeftDetails}
        timer={null}
        onDismiss={() => setTopLeftDetails('')}
      />

      <Snackbar
        variant="success"
        position="right"
        details={topRightDetails}
        timer={null}
        onDismiss={() => setTopRightDetails('')}
      />
    </>
  );
}
