import angularSvg from '../icons/learning-objectives/angular.svg';
import authSvg from '../icons/learning-objectives/auth.svg';
import browserSvg from '../icons/learning-objectives/browser.svg';
import businessSvg from '../icons/learning-objectives/business.svg';
import communicationSvg from '../icons/learning-objectives/communication.svg';
import charpSvg from '../icons/learning-objectives/csharp.svg';
import cssSvg from '../icons/learning-objectives/css3.svg';
import dbSvg from '../icons/learning-objectives/db.svg';
import dockerSvg from '../icons/learning-objectives/docker.svg';
import expressSvg from '../icons/learning-objectives/express.svg';
import firebaseSvg from '../icons/learning-objectives/firebase.svg';
import gitSvg from '../icons/learning-objectives/git.svg';
import cicdSvg from '../icons/learning-objectives/githubactions.svg';
import htmlSvg from '../icons/learning-objectives/html5.svg';
import httpSvg from '../icons/learning-objectives/http.svg';
import javaSvg from '../icons/learning-objectives/java.svg';
import jsSvg from '../icons/learning-objectives/javascript.svg';
import mongoSvg from '../icons/learning-objectives/mongodb.svg';
import mysqlSvg from '../icons/learning-objectives/mysql.svg';
import nodeSvg from '../icons/learning-objectives/nodedotjs.svg';
import phpSvg from '../icons/learning-objectives/php.svg';
import planningSvg from '../icons/learning-objectives/planning.svg';
import postgresSvg from '../icons/learning-objectives/postgres.svg';
import productDesignSvg from '../icons/learning-objectives/product-design.svg';
import pythonSvg from '../icons/learning-objectives/python.svg';
import reactSvg from '../icons/learning-objectives/react.svg';
import researchSvg from '../icons/learning-objectives/research.svg';
import slackSvg from '../icons/learning-objectives/slack.svg';
import socketioSvg from '../icons/learning-objectives/socketdotio.svg';
import sqlSvg from '../icons/learning-objectives/sql.svg';
import synthesisSvg from '../icons/learning-objectives/synthesis.svg';
import typescriptSvg from '../icons/learning-objectives/typescript.svg';
import userCentricitySvg from '../icons/learning-objectives/user-centricity.svg';
import uxSvg from '../icons/learning-objectives/ux.svg';
import vueSvg from '../icons/learning-objectives/vuedotjs.svg';
import wordpressSvg from '../icons/learning-objectives/wordpress.svg';

const learningObjectivesIcons = {
  angular: {
    color: '#DD0031',
    svg: angularSvg,
  },
  auth: {
    color: 'gold',
    svg: authSvg,
  },
  browser: {
    color: '#000000',
    svg: browserSvg,
  },
  business: {
    color: '#000000',
    svg: businessSvg,
  },
  communication: {
    color: '#000000',
    svg: communicationSvg,
  },
  csharp: {
    color: '#7F3A86',
    svg: charpSvg,
  },
  css: {
    color: '#1572B6',
    svg: cssSvg,
  },
  db: {
    color: 'gray',
    svg: dbSvg,
  },
  webops: {
    color: '#2496ED',
    svg: dockerSvg,
  },
  express: {
    color: '#000000',
    svg: expressSvg,
  },
  firebase: {
    color: '#FFCA28',
    svg: firebaseSvg,
  },
  scm: {
    color: '#F05032',
    svg: gitSvg,
  },
  cicd: {
    color: '#2088FF',
    svg: cicdSvg,
  },
  html: {
    color: '#E34F26',
    svg: htmlSvg,
  },
  http: {
    color: '#000000',
    svg: httpSvg,
  },
  java: {
    color: '#007396',
    svg: javaSvg,
  },
  js: {
    color: '#F7DF1E',
    svg: jsSvg,
  },
  mongodb: {
    color: '#47A248',
    svg: mongoSvg,
  },
  mysql: {
    color: '#4479A1',
    svg: mysqlSvg,
  },
  node: {
    color: '#339933',
    svg: nodeSvg,
  },
  php: {
    color: '#777BB4',
    svg: phpSvg,
  },
  planning: {
    color: '#000000',
    svg: planningSvg,
  },
  postgres: {
    color: '#4169E1',
    svg: postgresSvg,
  },
  'product-design': {
    color: '#000000',
    svg: productDesignSvg,
  },
  python: {
    color: '#3776AB',
    svg: pythonSvg,
  },
  react: {
    color: '#61DAFB',
    svg: reactSvg,
  },
  research: {
    color: '#000000',
    svg: researchSvg,
  },
  slack: {
    color: '#4A154B',
    svg: slackSvg,
  },
  'socket-io': {
    color: '#010101',
    svg: socketioSvg,
  },
  sql: {
    color: '#000000',
    svg: sqlSvg,
  },
  synthesis: {
    color: '#000000',
    svg: synthesisSvg,
  },
  typescript: {
    color: '#007ACC',
    svg: typescriptSvg,
  },
  'user-centricity': {
    color: '#000000',
    svg: userCentricitySvg,
  },
  ux: {
    color: '#56f89a',
    svg: uxSvg,
  },
  vue: {
    color: '#4FC08D',
    svg: vueSvg,
  },
  wordpress: {
    color: '#21759B',
    svg: wordpressSvg,
  },
};

export const learningObjectiveToIcon = (key) => {
  const icon = learningObjectivesIcons[key] || {};

  return {
    ...icon,
    build: (style = {}) => {
      const width = style.width || 24;
      return (
        <span
          key={`icon-${key}`}
          title={key}
          style={{
            position: 'relative',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width,
            height: width,
            marginRight: 3,
            ...(!icon.svg && {
              top: -7,
              borderRadius: 5,
              backgroundColor: '#333',
              color: '#fff',
              fontWeight: 'bold',
            }),
            ...(!!icon.color && {
              backgroundColor: icon.color,
            }),
            ...(!!icon.svg && {
              WebkitMask: `url("${icon.svg}") no-repeat center`,
              mask: `url("${icon.svg}") no-repeat center`,
            }),
            ...style,
          }}
        >
          {!icon.svg && key[0].toUpperCase()}
        </span>
      );
    },
  };
};