import { Story, Meta } from '@storybook/react';

import { ASSETS_URL } from '../../../consts/common';
import { CustomIcon, Grid, Typography, makeStyles } from '../../../index';
import { Tooltip } from './index';
import type { TooltipProps } from './index';

const createClasses = makeStyles(theme => ({
  container: {
    padding: theme.spacing(7, 3)
  }
}));

const iconHelpSrc = `${ASSETS_URL}/icons/icon_help-35.svg`;
const iconMainSrc = `${ASSETS_URL}/icons/icon_mail.svg`;

export default {
  title: 'Pop Overs/Tooltip',
  argTypes: {
    orientation: {
      description: 'The component orientation.',
      defaultValue: {
        summary: 'horizontal'
      }
    }
  }
} as Meta;

const DirectionsTemplate: Story<TooltipProps> = args => {
  const classes = createClasses();
  return (
    <Grid container justifyContent="space-around" className={classes.container}>
      <Tooltip {...args} placement="right">
        <div>
          <CustomIcon src={iconHelpSrc} />
        </div>
      </Tooltip>
      <Tooltip {...args}>
        <div>
          <CustomIcon src={iconHelpSrc} />
        </div>
      </Tooltip>
      <Tooltip {...args} placement="bottom">
        <div>
          <CustomIcon src={iconHelpSrc} />
        </div>
      </Tooltip>
      <Tooltip {...args} placement="left">
        <Grid>
          <CustomIcon src={iconHelpSrc} />
        </Grid>
      </Tooltip>
    </Grid>
  );
};

export const Directions = DirectionsTemplate.bind({});
Directions.args = {
  title: 'email@domain.com'
};

const IconsTemplate: Story<TooltipProps> = args => {
  const classes = createClasses();
  return (
    <Grid container justifyContent="space-around" className={classes.container}>
      <Grid xs item container alignItems="center" flexDirection="column">
        <Typography>Icon - L</Typography>
        <Tooltip {...args}>
          <div>
            <CustomIcon src={iconHelpSrc} />
          </div>
        </Tooltip>
      </Grid>
      <Grid xs item container alignItems="center" flexDirection="column">
        <Typography>Icon - R</Typography>
        <Tooltip
          {...args}
          title={
            <>
              email@domain.com&nbsp;&nbsp;
              <CustomIcon color="inherit" src={iconMainSrc} />
            </>
          }
        >
          <div>
            <CustomIcon src={iconHelpSrc} />
          </div>
        </Tooltip>
      </Grid>
    </Grid>
  );
};

export const WithIcons = IconsTemplate.bind({});
WithIcons.args = {
  title: (
    <>
      <CustomIcon color="inherit" src={iconMainSrc} />
      &nbsp;&nbsp;email@domain.com
    </>
  )
};