/* eslint-disable react/prop-types */
import { useArgs } from '@storybook/client-api';
import * as React from 'react';
import tw, { styled } from 'twin.macro';

import ProperBars from '~/icons/ProperBars';
import Button from '~/inputs/Button';
import Modal, { ModalActions, ModalBody, ModalHeader } from '~/modal/Modal';
import { Aside, H1, P } from '~/typography/Type';
import { StyleDefinition } from '~/typography/TypeContext';
import Typography from '~/typography/Typography';

export default {
  title: 'modal/Modal',
  component: Modal,
  args: {
    isOpen: false,
  },
  argTypes: {
    isOpen: {
      control: {
        type: 'boolean',
      },
    },
  },
};

export function Demo(props) {
  const [_, updateArgs] = useArgs();
  const setIsOpen = (isOpen) => updateArgs({ ...props, isOpen });
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open modal</Button>
      <Modal isOpen={props.isOpen} onClose={() => setIsOpen(false)}>
        <ModalHeader onClose={() => setIsOpen(false)}>
          <>Title goes here</>
        </ModalHeader>
        <ModalBody>Modal contents here</ModalBody>
        <ModalActions tw="flex justify-between">
          <Button variant="secondary" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button variant="primary" onClick={() => setIsOpen(false)}>
            Okay
          </Button>
        </ModalActions>
      </Modal>
    </>
  );
}

export const InfoPopup = (props) => {
  const [_, updateArgs] = useArgs();
  const setIsOpen = (isOpen) => updateArgs({ ...props, isOpen });
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open modal</Button>
      <Modal
        tw="bg-spiral-brand"
        isOpen={props.isOpen}
        onClose={() => setIsOpen(false)}
      >
        <ModalHeader onClose={() => setIsOpen(false)}>
          <div tw="flex items-center text-brand text-xl">
            <ProperBars tw="h-3 mr-3" />
            <h3>Sleep Efficiency</h3>
          </div>
        </ModalHeader>
        <ModalBody>
          <hr tw="mb-5 border-black border-opacity-30" />
          <p>
            The amount of time you spent asleep, compared to the amount of time
            spent in bed. Higher numbers are better.
          </p>
        </ModalBody>
      </Modal>
    </>
  );
};

const INFO_CARD_TYPE: StyleDefinition = {
  headings: [styled.h1(tw`font-serif text-xl leading-tight text-center mb-6`)],
  aside: styled.aside(tw`text-xs`),
  p: styled.p(
    tw`font-sans text-base leading-normal text-center whitespace-pre-line`,
  ),
};

export const InfoPopupWithLongContent = (props) => {
  const [_, updateArgs] = useArgs();
  const setIsOpen = (isOpen) => updateArgs({ ...props, isOpen });
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open modal</Button>
      <Modal
        tw="bg-spiral-brand"
        isOpen={props.isOpen}
        onClose={() => setIsOpen(false)}
      >
        <ModalHeader onClose={() => setIsOpen(false)}>
          <div tw="flex items-center text-brand text-xl">
            <ProperBars tw="h-3 mr-3" />
            <h3>Sleep Efficiency</h3>
          </div>
        </ModalHeader>
        <ModalBody>
          <Typography styles={INFO_CARD_TYPE}>
            <hr tw="mb-5 border-black border-opacity-30" />
            <Aside>
              Learn more about each of these behaviors, and tap the icon to add
              or remove each behavior to your journal entry.
            </Aside>
            <hr tw="mb-4" />
            <div tw="mb-4">
              <H1>Napped during the day</H1>
              <P>
                Napping during the day decreases the “hunger” for sleep come
                nighttime. If napping can't be avoided, consider decreasing the
                duration or avoiding naps close to bedtime
              </P>
            </div>
            <div tw="mb-4">
              <H1>Caffeine after 3p</H1>
              <P>
                Caffeine is a stimulant with a half-life of 5-6 hours (longer
                for some that may be taking different types of medication).
                People’s sensitivity to caffeine can vary, but because it is a
                stimulant, it may cause difficulties in the onset of sleep if it
                is still in your body’s system come bedtime. That’s why, as a
                general rule of thumb, we recommend limiting intake to before
                2pm; however, if you typically go to bed around 10pm you would
                not want to consume caffeine after 12-1pm.
              </P>
            </div>
            <div tw="mb-4">
              <H1>Fluid near bedtime</H1>
              <P>
                Bathroom breaks can disrupt sleep, reducing liquid intake 1-3
                hours prior to bed can help.
              </P>
            </div>
          </Typography>
        </ModalBody>
      </Modal>
    </>
  );
};