import type { Story, Meta } from '@storybook/react';
import { useState } from 'react';
import DialogContentText from '@mui/material/DialogContentText';

import { ASSETS_URL } from '../../../consts/common';
import { Button } from '../../button';
import { Link } from '../../@navigation/link';
import { Modal } from './modal';
import type { ModalProps } from './modal';

export default {
  component: Modal,
  title: 'Pop Overs/Modal',
  argTypes: {
    onClose: {
      description: 'Callback to be fired on close icon click.'
    },
    dialogTitleProps: {
      description: 'Properties for perimeter_81 `DialogTitle` component.'
    },
    dialogContentProps: {
      description: 'Properties for material-ui `DialogContent` component.'
    },
    dialogActionsProps: {
      description: 'Properties for material-ui `DialogActions` component.'
    }
  }
} as Meta;

const Template: Story<ModalProps> = args => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <Button color="secondary" onClick={handleOpen}>
        Open modal dialog
      </Button>
      <Modal {...args} open={open} onClose={handleClose} />
    </>
  );
};

export const NoIcon = Template.bind({});
NoIcon.args = {
  onClose: () => alert('Will close dialog.'),
  dialogTitleProps: {
    children: 'Dialog title'
  },
  dialogContentProps: {
    children: (
      <DialogContentText>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae gravida lorem. In
        non gravida elit. Sed fringilla nunc id metus aliquam laoreet.
      </DialogContentText>
    )
  },
  dialogActionsProps: {
    children: (
      <Button onClick={() => alert('Will close dialog.')} color="primary">
        Okay
      </Button>
    )
  }
};

const ModalTemplate: Story<ModalProps> = () => {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleAgreeAndClose = () => {
    alert('The user has confirmed his consent.');
    setOpen(false);
  };

  return (
    <>
      <Button color="secondary" onClick={handleClickOpen}>
        Open modal dialog
      </Button>
      <Modal
        id="1"
        open={open}
        onClose={handleClose}
        dialogTitleProps={{
          icon: {
            src: `${ASSETS_URL}/icons/icon_database.svg`
          },
          children: 'Reset Database 2FA'
        }}
        dialogContentProps={{
          children: (
            <DialogContentText>
              Are you sure you want to reset Database 2FA{' '}
              <Link table href="/user-keanu-cook">
                Keanu Cook
              </Link>
              ?
            </DialogContentText>
          )
        }}
        dialogActionsProps={{
          children: (
            <>
              <Button onClick={handleClose} color="third">
                Cancel
              </Button>
              <Button onClick={handleAgreeAndClose} color="primary">
                Reset Database
              </Button>
            </>
          )
        }}
      />
    </>
  );
};
export const WithIcon = ModalTemplate.bind({});

const ModalTemplateWithAvatar: Story<ModalProps> = () => {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleAgreeAndClose = () => {
    alert('The user has confirmed his consent.');
    setOpen(false);
  };

  return (
    <>
      <Button color="secondary" onClick={handleClickOpen}>
        Open modal dialog
      </Button>
      <Modal
        id="1"
        avatarProps={{
          customSize: 64,
          initials: 'JK',
          backgroundColor: '#990099',
          color: '#FFFFFF',
          emailVerified: true,
          style: {}
        }}
        open={open}
        onClose={handleClose}
        dialogTitleProps={{
          children: 'Reset Database 2FA'
        }}
        dialogContentProps={{
          children: (
            <DialogContentText>
              Are you sure you want to reset Database 2FA{' '}
              <Link table href="/user-keanu-cook">
                Keanu Cook
              </Link>
              ?
            </DialogContentText>
          )
        }}
        dialogActionsProps={{
          children: (
            <>
              <Button onClick={handleClose} color="third">
                Cancel
              </Button>
              <Button onClick={handleAgreeAndClose} color="primary">
                Reset Database
              </Button>
            </>
          )
        }}
      />
    </>
  );
};
export const WithAvatar = ModalTemplateWithAvatar.bind({});

export const Video: Story<ModalProps> = () => {
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <Button color="secondary" onClick={handleClickOpen}>
        Open modal dialog
      </Button>
      <Modal
        id="1"
        open={open}
        onClose={handleClose}
        videoUrl="https://www.youtube.com/embed/etrEBSAnwzg"
        videoBtnTxt="Learn More"
      />
    </>
  );
};