import React, { useMemo } from 'react';
import { ILogoTheme, ILogoSize, ILogoText } from './types';
import iconSet from 'icons/logos/selection.json';
import { CSSObject } from 'styled-components';
import { Link } from '../Link/styles';

export interface ILogoProps {
  /** Logo Size */
  size: ILogoSize;
  /** Add MyCooler text to the logo */
  text?: ILogoText;
  /** Select type of logo */
  logoTheme: ILogoTheme;
  /** Link where the logo redirect on press */
  /* To Do: validate the url is valid */
  url?: string;
  /* name of custom class that will be added to logo for CSS styling */
  className?: string;
  /* CSS object that will be applied to logo atom */
  style?: CSSObject;
}

export const logoSizes = {
  small: 34,
  medium: 128,
  large: 248,
};

const icons = {
  light: {
    centered: 'light-centered',
    sided: 'light-sided',
    none: 'light-dark-solo',
  },
  monocromatic: {
    centered: 'monocromatic-centered',
    sided: 'monocromatic-sided',
    none: 'monocromatic-solo',
  },
  dark: {
    centered: 'dark-centered',
    sided: 'dark-sided',
    none: 'light-dark-solo',
  },
};

export const AtomLogo = ({
  size,
  text='none',
  logoTheme,
  url = '/',
  className = 'atom__logo',
  style = {},
}: ILogoProps) => {
  const origin = 0;
  const viewBoxHeight = logoSizes['large'] * 4;
  const centeredAspectRatio = 1.2133333333333334;
  const sidedAspectRatio = 3.41;
  let baseWidth = logoSizes[size];
  const viewportHeight = baseWidth;
  let viewBoxWidth = viewBoxHeight;
  if (text === 'sided') {
    baseWidth = baseWidth * sidedAspectRatio;
    viewBoxWidth = viewBoxHeight * sidedAspectRatio;
  } else if (text === 'centered') {
    baseWidth = baseWidth * centeredAspectRatio;
    viewBoxWidth = viewBoxHeight * 1.3;
  }

  const getIcon = () => {
    return icons[logoTheme][text ?? 'none'];
  };

  const currentIcon = useMemo(() => {
    //Any is used here in attrs because attrs can be diferent for each path
    return iconSet.icons
      .map(
        (item: {
          properties: { name: string };
          icon: { paths: string[] };
          attrs: any[];
        }) => {
          return {
            name: item.properties.name,
            paths: item.icon.paths,
            attrs: item.attrs,
          };
        }
      )
      .find((item: { name: string }) => {
        return item.name === getIcon();
      });
  }, [iconSet, getIcon()]);

  const paths = currentIcon?.paths.map((p: string, inx: number) =>
    React.createElement('path', {
      key: String(inx),
      d: p,
      ...currentIcon?.attrs[inx],
    })
  );
  const svgElement = React.createElement(
    'svg',
    {
      width: baseWidth,
      height: viewportHeight,
      viewBox: ''
        .concat(`${origin}`, ' ')
        .concat(`${origin}`, ' ')
        .concat(`${viewBoxWidth}`, ' ')
        .concat(`${viewBoxHeight}`),
    },
    paths
  );
  return (
    <Link color={'custom'}
      customColor={'neutral'}
      disabled={false}
      className={className}
      href={url}
      styles={style}>
      {svgElement}
    </Link>
  );
};
