import { ArgTypes, Meta, Story } from '@storybook/react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { ASSETS_URL } from '../../consts/common';
import { CustomIcon } from './custom-icon';
import type { CustomIconProps } from './types';
import { newIconSources, oldIconSources } from './helpers';

const argTypes: Partial<ArgTypes<CustomIconProps>> = {
  color: {
    description:
      'Color of the icon (will replace the fill colors of the SVG path, use an empty string to keep the original icon colors).',
    control: {
      type: 'color'
    },
    defaultValue: {
      summary: '#546491'
    }
  },
  size: {
    description: 'Set the size of the icon.',
    options: ['small', 'medium', 'large', 'xlarge'],
    control: {
      type: 'select'
    },
    defaultValue: {
      summary: 'small'
    }
  },
  customSize: {
    description: 'Custom icon size (in pixels, overrides the `size`).',
    control: {
      type: 'range',
      min: 8,
      max: 104,
      step: 8,
      reset: true
    }
  },
  rotateDeg: {
    description: 'The amount of rotation, in degrees.',
    control: {
      type: 'range',
      min: -180,
      max: 180,
      step: 5,
      reset: true
    }
  },
  src: {
    description: 'The SVG URL.',
    options: newIconSources,
    control: {
      type: 'select'
    }
  },
  className: {
    description: 'Custom class name in case you need to add custom styles to the component.'
  }
};

export default {
  component: CustomIcon,
  title: 'Foundations/Icons',
  argTypes
} as Meta;

const renderCustomIcon = (args: CustomIconProps) => (iconSrc: string) => {
  const iconName = iconSrc.split('/')[iconSrc.split('/').length - 1];
  return iconName ? (
    <Grid key={`key_${iconName}`} item>
      <CustomIcon
        {...args}
        src={iconSrc}
        style={{ cursor: 'pointer' }}
        title={iconName}
        onClick={() => {
          alert(`${iconSrc}`);
        }}
      />
    </Grid>
  ) : null;
};

const renderCustomImage = (args: CustomIconProps) => (imageSrc: string) => {
  const imageName = imageSrc.split('/')[imageSrc.split('/').length - 1];
  return imageName ? (
    <Grid key={`key_${imageName}`} item>
      <img
        {...args}
        alt=""
        src={imageSrc}
        style={{ cursor: 'pointer' }}
        title={imageName}
        width={88}
        onClick={() => {
          alert(`${imageSrc}`);
        }}
      />
    </Grid>
  ) : null;
};

const Template: Story<CustomIconProps> = args => {
  return <CustomIcon {...args} />;
};

export const Primary = Template.bind({});
Primary.args = {
  color: '#546491',
  customSize: 0,
  rotateDeg: 0,
  size: 'small',
  src: `${ASSETS_URL}/icons2/icon_userSettings.svg`,
  style: {}
};

export const InheritedColors = Template.bind({});
InheritedColors.args = {
  color: 'inherit',
  size: 'large',
  src: `${ASSETS_URL}/icons/icon_AWS.svg`,
  style: {}
};

const CircleShapedTemplate: Story<CustomIconProps> = args => {
  // storybook sometimes passes an object {summary: '...'} that results in an error

  const getIconSize = (value: CustomIconProps['size']) =>
    typeof value === 'string' ? value : undefined;
  return (
    <Grid container spacing={2}>
      <Grid item>
        <CustomIcon
          {...args}
          size={getIconSize(args.size) || 'small'}
          src={`${ASSETS_URL}/icons2/icon_security.svg`}
          style={{
            backgroundColor: '#CB5BCB',
            borderRadius: '50%',
            minWidth: '32px',
            minHeight: '32px'
          }}
        />
      </Grid>
      <Grid item>
        <CustomIcon {...args} size={getIconSize(args.size) || 'small'} />
      </Grid>
      <Grid item>
        <CustomIcon
          {...args}
          size={getIconSize(args.size) || 'xlarge'}
          src={`${ASSETS_URL}/icons2/icon_security.svg`}
          style={{
            backgroundColor: '#4DC9F6',
            borderRadius: '50%',
            minWidth: '88px',
            minHeight: '88px'
          }}
        />
      </Grid>
      <Grid item>
        <CustomIcon
          {...args}
          size={getIconSize(args.size) || 'large'}
          src={`${ASSETS_URL}/icons/icon_AWS.svg`}
          title="AWS"
          style={{
            backgroundColor: '#FFFFFF',
            border: '8px solid #F2F7FF',
            borderRadius: '50%',
            minWidth: '64px',
            minHeight: '64px'
          }}
        />
      </Grid>
    </Grid>
  );
};

export const CircleShaped = CircleShapedTemplate.bind({});
CircleShaped.args = {
  color: '',
  src: `${ASSETS_URL}/icons/icon_User.svg`,
  style: {
    backgroundColor: '#266FE2',
    borderRadius: '50%',
    minWidth: '48px',
    minHeight: '48px'
  }
};

const OldIconsTemplate: Story<CustomIconProps> = args => {
  return (
    <>
      <Typography marginBottom={4}>Click on the icon to get its SRC (address)</Typography>
      <Grid container spacing={2}>
        {oldIconSources.map(renderCustomIcon(args))}
      </Grid>
    </>
  );
};

export const OldIcons = OldIconsTemplate.bind({});
OldIcons.args = {
  color: '',
  size: 'small',
  style: {}
};

const NewIconsTemplate: Story<CustomIconProps> = args => {
  return (
    <>
      <Typography marginBottom={4}>Click on the icon to get its SRC (address)</Typography>
      <Grid container spacing={2}>
        {newIconSources.map(renderCustomIcon(args))}
      </Grid>
    </>
  );
};

export const NewIcons = NewIconsTemplate.bind({});
NewIcons.args = {
  color: '',
  size: 'small',
  style: {}
};