import { useState } from 'react';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Vimeo } from 'mdx-embed';
import { MediaModal } from './MediaModal';
import { Badge } from '../Badge/Badge';
import { Box } from '../Box/Box';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';
import { Popover } from '../Popover/Popover';
import { useOpenClose } from '../../hooks/useOpenClose/useOpenClose';

<Meta title="Components/MediaModal/Overview" component={MediaModal} />

# MediaModal

The MediaModal is a "light box" style container for presenting an image or video.

The default behavior of a Modal is to focus on the first focusable item.
Therefore, you should ensure that the first focusable item is non-destructive, such as a "cancel" or close button.

<Canvas withSource="open">
  <Story
    name="Basic Usage"
    parameters={{
      chromatic: { disableSnapshot: true },
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=1503%3A30057',
      },
    }}
  >
    {() => {
      const {
        isOpen: isMediaModalOpen,
        handleOpen: openMediaModal,
        handleClose: closeMediaModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openMediaModal}>
            Show MediaModal
          </Button>
          <MediaModal
            ariaLabel="landscape photo"
            isOpen={isMediaModalOpen}
            onDismiss={closeMediaModal}
          >
            <img
              src="images/landscape-mediamodal.jpg"
              alt=""
              style={{
                objectFit: 'contain',
                maxHeight: '100vh',
              }}
            />
          </MediaModal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Usage Guidelines

- Is used for viewing "media" assets such as images and videos, and not for confirmation or messaging to the user.
- The bottom footer contains no more than three primary actions (e.g. for an image, they would be download, open new window, and third reserved tertiary actions in a popover menu)
- It closes when a user presses the `esc` key, outside of the content area, or the `x` button

## Content Guidelines

- The title/description properties should describe the contents of the modal
- Its children are primarily images or videos, not copy.

## Props

<ArgsTable of={MediaModal} />

## Title, Description, Footer

An optional title and description can be used to describe the contents of the modal.

<Canvas withSource="open">
  <Story
    name="Portrait Image with Title and Description"
    parameters={{
      chromatic: { disableSnapshot: true },
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=1503%3A30057',
      },
    }}
  >
    {() => {
      const {
        isOpen: isMediaModalOpen,
        handleOpen: openMediaModal,
        handleClose: closeMediaModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openMediaModal}>
            Portrait Image with Title and Description
          </Button>
          <MediaModal
            title="portrait-mediamodal.jpg"
            description="Site Survey - Roof"
            isOpen={isMediaModalOpen}
            onDismiss={closeMediaModal}
          >
            <img
              src="images/portrait-mediamodal.jpg"
              alt=""
              style={{
                objectFit: 'contain',
                height: 'calc(100vh - var(--size-height-2xl))',
                width: 'auto',
              }}
            />
          </MediaModal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Close Button

Render a visible close button in the upper right of the viewport.

<Canvas withSource="open">
  <Story
    name="With Close Button"
    parameters={{
      chromatic: { disableSnapshot: true },
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=1503%3A30057',
      },
    }}
  >
    {() => {
      const {
        isOpen: isMediaModalOpen,
        handleOpen: openMediaModal,
        handleClose: closeMediaModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openMediaModal}>
            Show with Close Button
          </Button>
          <MediaModal
            ariaLabel="landscape photo"
            isOpen={isMediaModalOpen}
            onDismiss={closeMediaModal}
            closeButton
          >
            <img
              src="images/landscape-mediamodal.jpg"
              alt=""
              style={{
                objectFit: 'contain',
                maxHeight: '100vh',
              }}
            />
          </MediaModal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Custom Header and Footer

A node can be passed to `headerContent` and `footerContent` for more control over what is displayed in the respective content areas of the MediaModal.

If `headerContent` is defined, then the `title` and `description` will not be rendered, even if defined.

<Canvas withSource="open">
  <Story
    name="Custom Header Content"
    parameters={{
      chromatic: { disableSnapshot: true },
    }}
  >
    {() => {
      const {
        isOpen: isMediaModalOpen,
        handleOpen: openMediaModal,
        handleClose: closeMediaModal,
      } = useOpenClose();
      const { isOpen: isPopoverOpen, onToggle: onPopoverToggle } =
        useOpenClose();
      const headerItems = (
        <Box gap="2xs">
          <Box fontWeight="bold">Custom Styled Title</Box>
          <Box direction="row" gap="xs">
            <Badge variant="info" message="Invertor" />
            <Badge variant="info" message="Utility Meter" />
            <Badge variant="info" message="Site Survey" />
          </Box>
        </Box>
      );
      const footerItems = (
        <Box direction="row" childGap="lg">
          <Button
            variant="tertiary"
            tone="neutral"
            as="a"
            color="white"
            href="/images/landscape-mediamodal.jpg"
            iconPrefix="download"
            download
            size="sm"
          />
          <Button
            variant="tertiary"
            tone="neutral"
            as="a"
            href="/images/landscape-mediamodal.jpg"
            target="_blank"
            iconPrefix="launch-app"
            size="sm"
          />
          <Popover
            content={<>more options</>}
            isOpen={isPopoverOpen}
            contentContainerProps={{
              padding: 'md',
              direction: 'column',
              color: 'grey-600',
              fontSize: 'sm',
            }}
          >
            <Button
              variant="tertiary"
              tone="neutral"
              iconPrefix="dots"
              onClick={onPopoverToggle}
              size="sm"
            />
          </Popover>
        </Box>
      );
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openMediaModal}>
            With Custom Header and Footer
          </Button>
          <MediaModal
            isOpen={isMediaModalOpen}
            onDismiss={closeMediaModal}
            headerContent={headerItems}
            footerContent={footerItems}
            ariaLabel="custom header and footer"
          >
            <img
              src="images/portrait-mediamodal.jpg"
              alt=""
              style={{
                objectFit: 'contain',
                height: 'calc(100vh - var(--size-height-2xl))',
                width: 'auto',
              }}
            />
          </MediaModal>
        </div>
      );
    }}
  </Story>
</Canvas>

## Video

<Canvas withSource="open">
  <Story
    name="Vimeo Video"
    parameters={{
      chromatic: { disableSnapshot: true },
    }}
  >
    {() => {
      const {
        isOpen: isMediaModalOpen,
        handleOpen: openMediaModal,
        handleClose: closeMediaModal,
      } = useOpenClose();
      return (
        <div>
          <Button variant="primary" tone="neutral" onClick={openMediaModal}>
            Show Vimeo Modal
          </Button>
          <MediaModal
            ariaLabel="vimeo video"
            isOpen={isMediaModalOpen}
            onDismiss={closeMediaModal}
          >
            <Box
              display="block"
              width="90vw"
              maxWidth="5xl"
              data-chromatic="ignore"
            >
              <Vimeo vimeoId="595469877" />
            </Box>
          </MediaModal>
        </div>
      );
    }}
  </Story>
</Canvas>
