import React, { useEffect, useState } from 'react';
import { Meta, StoryObj } from '@storybook/react';
import Toaster from './Toast';
import Button from '../Button';

const meta: Meta<typeof Toaster> = {
  title: 'Components/Toast',
  component: Toaster,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: { control: { type: 'select' } },
    displayPosition: { control: { type: 'select' } },
  },
  tags: ['autodocs'],
};

type Story = StoryObj<typeof Toaster>;
const defaultArgs = {
  isOpen: false,
  toastTitle: 'Success',
  toastMessage: 'Variable name Requested for Review successfully',
  closeButtonLabel: 'x',
  displayDuration: 3000, // Set toast displayDuration in milliseconds
};

export const Controlled: Story = {
  args: {
    ...defaultArgs,
  },
  render: () => {
    const [open1, setOpen1] = useState(false);
    const handleButtonClick1 = () => {
      setOpen1(true);
      setTimeout(() => {
        setOpen1(false);
      }, defaultArgs.displayDuration); // Set toast displayDuration in milliseconds
    };
    const handleCancelClick1 = () => {
      setOpen1(false);
    };

    const [open2, setOpen2] = useState(false);
    const handleButtonClick2 = () => {
      setOpen2(true);
      setTimeout(() => {
        setOpen2(false);
      }, defaultArgs.displayDuration); // Set toast displayDuration in milliseconds
    };
    const handleCancelClick2 = () => {
      setOpen2(false);
    };
    const [open3, setOpen3] = useState(false);
    const handleButtonClick3 = () => {
      setOpen3(true);
      setTimeout(() => {
        setOpen3(false);
      }, defaultArgs.displayDuration); // Set toast displayDuration in milliseconds
    };
    const handleCancelClick3 = () => {
      setOpen3(false);
    };
    const [open4, setOpen4] = useState(false);
    const handleButtonClick4 = () => {
      setOpen4(true);
      setTimeout(() => {
        setOpen4(false);
      }, defaultArgs.displayDuration); // Set toast displayDuration in milliseconds
    };
    const handleCancelClick4 = () => {
      setOpen4(false);
    };
    const [open5, setOpen5] = useState(false);
    const handleButtonClick5 = () => {
      setOpen5(true);
      setTimeout(() => {
        setOpen5(false);
      }, defaultArgs.displayDuration); // Set toast displayDuration in milliseconds
    };
    const handleCancelClick5 = () => {
      setOpen5(false);
    };
    const [open6, setOpen6] = useState(false);
    const handleButtonClick6 = () => {
      setOpen6(true);
      setTimeout(() => {
        setOpen6(false);
      }, defaultArgs.displayDuration); // Set toast displayDuration in milliseconds
    };
    const handleCancelClick6 = () => {
      setOpen6(false);
    };
    return (
      <div className="storybook-stories-toaster-container">
        <div className="storybook-stories-toaster-container-row">
          <div>
            <Button
              variant="success"
              label="click to get top-left toaster"
              onClick={handleButtonClick1}
              disabled={false}
            />
            <Toaster
              {...defaultArgs}
              isOpen={open1}
              variant="success"
              displayPosition="top-left"
              toastTitle="Success!"
              onCancelClick={handleCancelClick1}
              toastMessage="Variable name Requested for Review successfully"
            />
          </div>
          <div>
            <Button
              variant="secondary"
              label="click to get top toaster"
              onClick={handleButtonClick2}
              disabled={false}
            />
            <Toaster
              {...defaultArgs}
              isOpen={open2}
              variant="info"
              displayPosition="top"
              toastTitle="Info!!!"
              onCancelClick={handleCancelClick2}
              toastMessage="Variable name Requested for Review successfully"
            />
          </div>
          <div>
            <Button
              variant="danger"
              label="click to get top-right toaster"
              onClick={handleButtonClick3}
              disabled={false}
            />
            <Toaster
              {...defaultArgs}
              isOpen={open3}
              variant="danger"
              displayPosition="top-right"
              toastTitle="Error!"
              onCancelClick={handleCancelClick3}
              toastMessage="Variable name Requested for Review successfully"
            />
          </div>
        </div>
        <div className="storybook-stories-toaster-container-row">
          <div>
            <Button
              variant="primary"
              label="click to get bottom-left toaster"
              onClick={handleButtonClick4}
              disabled={false}
            />
            <Toaster
              {...defaultArgs}
              isOpen={open4}
              variant="warning"
              displayPosition="bottom-left"
              toastTitle="Warning!"
              onCancelClick={handleCancelClick4}
              toastMessage="Variable name Requested for Review successfully"
            />
          </div>
          <div>
            <Button
              variant="primary"
              label="click to get bottom toaster"
              onClick={handleButtonClick5}
              disabled={false}
            />
            <Toaster
              {...defaultArgs}
              isOpen={open5}
              variant="success"
              displayPosition="bottom"
              toastTitle="Success!"
              onCancelClick={handleCancelClick5}
              toastMessage="Variable name Requested for Review successfully"
            />
          </div>
          <div>
            <Button
              variant="primary"
              label="click to get bottom-right toaster"
              onClick={handleButtonClick6}
              disabled={false}
            />
            <Toaster
              {...defaultArgs}
              isOpen={open6}
              variant="success"
              displayPosition="bottom-right"
              toastTitle="Success!"
              onCancelClick={handleCancelClick6}
              toastMessage="Variable name Requested for Review successfully"
            />
          </div>
        </div>
      </div>
    );
  },
};

export default meta;