import React, { useState } from 'react';
import {
  storybookArgTypes,
  storybookExcludedControlParams,
  StoryMetaType,
} from '@lg-tools/storybook-utils';
import { StoryFn } from '@storybook/react';

import { Button } from '@leafygreen-ui/button';
import { css } from '@leafygreen-ui/emotion';
import { CloseIconColor } from '@leafygreen-ui/modal';
import { Link } from '@leafygreen-ui/typography';

import MarketingModal, {
  BlobPosition,
  GraphicStyle,
  MarketingModalProps,
} from '.';

const meta: StoryMetaType<typeof MarketingModal> = {
  title: 'Sections/Modals/Marketing Modal',
  component: MarketingModal,
  args: {
    darkMode: false,
    showBlob: true,
    blobPosition: BlobPosition.TopLeft,
    buttonText: 'Button Text',
    linkText: 'Link Text',
    title: 'Title Text',
    graphicStyle: 'center',
    children:
      'This is some description text, and it is extra long so it fills up this modal. Another thing about the modals here.',
    closeIconColor: CloseIconColor.Default,
    className: css`
      z-index: 1;
    `,
    disclaimer: 'This is a test disclaimer.',
  },
  argTypes: {
    graphicStyle: {
      control: 'radio',
      options: Object.values(GraphicStyle),
    },
    closeIconColor: {
      control: 'radio',
      options: Object.values(CloseIconColor),
    },
    showBlob: { control: 'boolean' },
    blobPosition: {
      control: 'radio',
      options: Object.values(BlobPosition),
    },
    disclaimer: { control: 'text' },
    buttonText: {
      control: 'text',
      description:
        'Storybook-only prop for controlling button text. In actual usage, use the `children` property in `buttonProps`.',
    },
    children: storybookArgTypes.children,
    darkMode: storybookArgTypes.darkMode,
  },
  parameters: {
    default: 'LiveExample',
    controls: {
      exclude: [
        ...storybookExcludedControlParams,
        'open',
        'graphic',
        'buttonProps',
        'onButtonClick',
        'onLinkClick',
      ],
    },
  },
};
export default meta;

type MarketingModalStoryProps = MarketingModalProps & { buttonText: string };

export const LiveExample: StoryFn<MarketingModalStoryProps> = ({
  graphicStyle,
  darkMode,
  disclaimer,
  buttonProps,
  buttonText,
  ...args
}) => {
  const graphicCenterImage = 'marketing-center-light.svg';
  const graphicFillImage = darkMode
    ? 'marketing-fill-dark.jpg'
    : 'marketing-fill-light.jpg';
  const [open, setOpen] = useState(false);
  const handleClose = () => setOpen(false);
  return (
    <div>
      <Button darkMode={darkMode} onClick={() => setOpen(!open)}>
        Open Modal
      </Button>
      <MarketingModal
        {...args}
        graphicStyle={graphicStyle}
        darkMode={darkMode}
        buttonProps={{
          ...buttonProps,
          children: buttonText,
          onClick: handleClose,
        }}
        graphic={
          graphicStyle === GraphicStyle.Center ? (
            <img
              alt=""
              src={`/examples/${graphicCenterImage}`}
              width={275}
              height={220}
            />
          ) : (
            <img alt="Marketing Modal" src={`/examples/${graphicFillImage}`} />
          )
        }
        disclaimer={
          disclaimer && (
            <>
              {disclaimer}
              {` `} <Link>Terms and conditions.</Link>
            </>
          )
        }
        open={open}
        onClose={handleClose}
      />
    </div>
  );
};
LiveExample.parameters = {
  chromatic: { disableSnapshot: true },
};

const Template: StoryFn<MarketingModalStoryProps> = ({
  graphicStyle,
  darkMode,
  disclaimer,
  buttonProps,
  buttonText,
  ...args
}) => {
  const graphicCenterImage = 'marketing-center-light.svg';
  const graphicFillImage = darkMode
    ? 'marketing-fill-dark.jpg'
    : 'marketing-fill-light.jpg';
  const [open, setOpen] = useState(true);
  const handleClose = () => setOpen(false);
  return (
    <div
      className={css`
        height: 100vh;
      `}
    >
      <MarketingModal
        {...args}
        graphicStyle={graphicStyle}
        darkMode={darkMode}
        buttonProps={{
          ...buttonProps,
          children: buttonText,
          onClick: handleClose,
        }}
        graphic={
          graphicStyle === GraphicStyle.Center ? (
            <img
              alt=""
              src={`/examples/${graphicCenterImage}`}
              width={275}
              height={220}
            />
          ) : (
            <img alt="Marketing Modal" src={`/examples/${graphicFillImage}`} />
          )
        }
        disclaimer={
          disclaimer && (
            <>
              {disclaimer}
              {` `} <Link>Terms and conditions.</Link>
            </>
          )
        }
        open={open}
        onClose={handleClose}
      />
    </div>
  );
};

export const GraphicStyleFill = Template.bind({});
GraphicStyleFill.args = {
  graphicStyle: GraphicStyle.Fill,
};

export const GraphicStyleCenter = Template.bind({});
GraphicStyleCenter.args = {
  graphicStyle: GraphicStyle.Center,
};

export const BlobTopRight = Template.bind({});
BlobTopRight.args = {
  blobPosition: BlobPosition.TopRight,
};

export const BlobBottomRight = Template.bind({});
BlobBottomRight.args = {
  blobPosition: BlobPosition.BottomRight,
};

export const GraphicStyleFillDarkMode = Template.bind({});
GraphicStyleFillDarkMode.args = {
  graphicStyle: GraphicStyle.Fill,
  darkMode: true,
};

export const GraphicStyleCenterDarkMode = Template.bind({});
GraphicStyleCenterDarkMode.args = {
  graphicStyle: GraphicStyle.Center,
  darkMode: true,
};

export const BlobTopRightDarkMode = Template.bind({});
BlobTopRightDarkMode.args = {
  blobPosition: BlobPosition.TopRight,
  darkMode: true,
};

export const BlobBottomRightDarkMode = Template.bind({});
BlobBottomRightDarkMode.args = {
  blobPosition: BlobPosition.BottomRight,
  darkMode: true,
};