import React, { useCallback, useMemo } from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { Grid } from "@mui/material";
import ContactOptionList from "./ContactOptionList";
import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
import EmailIcon from "@mui/icons-material/Email";
import PhoneAndroidIcon from "@mui/icons-material/PhoneAndroid";
import LanguageIcon from "@mui/icons-material/Language";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import GitHubIcon from "@mui/icons-material/GitHub";
import RedditIcon from "@mui/icons-material/Reddit";
import BookIcon from "@mui/icons-material/Book";
import MenuBookIcon from "@mui/icons-material/MenuBook";
import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
import { useClipboard } from "../../../../hooks";

const icons = {
  EMAIL: EmailIcon,
  PHONE: PhoneAndroidIcon,
  PORTFOLIO: BusinessCenterIcon,
  LINKEDIN: LinkedInIcon,
  GITHUB: GitHubIcon,
  GITEA: GitHubIcon,
  REDDIT: RedditIcon,
  BLOG: BookIcon,
  CURRICULUM_VITAE: MenuBookIcon,
  PROFILE_PICTURE: FileCopyOutlinedIcon,
  DEFAULT: LanguageIcon
};

const tooltips = {
  EMAIL: "Generic.SendEmail",
  PHONE: "Generic.Copy",
  PORTFOLIO: "User.Profile.OpenPortfolio",
  DEFAULT: "Generic.OpenInNewTab"
};

const orderNumbers = {
  PORTFOLIO: 1,
  EMAIL: 2,
  PHONE: 3,
  CURRICULUM_VITAE: 4,
  LINKEDIN: 5,
  PROFILE_PICTURE: 6,
  GITEA: 7,
  GITHUB: 8,
  BLOG: 9,
  WEBSITE: 10,
  REDDIT: 12,
  DEFAULT: 100
};

const getIcon = contactOption => {
  const icon = icons[contactOption.contactTypeCode] || icons.DEFAULT;
  return icon;
};

const getTooltip = contactOption => {
  const tooltip = tooltips[contactOption.contactTypeCode] || tooltips.DEFAULT;
  return tooltip;
};

const getOrderNumber = contactOption => {
  const orderNo = orderNumbers[contactOption.contactTypeCode] || orderNumbers.DEFAULT;
  return orderNo;
};

const getLabel = (contactOption, userName) => {
  switch (contactOption.contactTypeCode) {
    case "EMAIL":
    case "PHONE":
    case "PROFILE_PICTURE":
      return contactOption.contactValue;
    case "PORTFOLIO":
      return userName;
    default:
      return contactOption.contactTypeName;
  }
};

const handleEmailSending = email => event => {
  window.location.href = `mailto:${email}`;
  event.preventDefault();
};

const chunkSize = 6;
const sliceContactOptions = options => {
  const chunks = [];
  for (let i = 0; i < options.length; i += chunkSize) {
    chunks.push(options.slice(i, i + chunkSize));
  }
  return chunks;
};

const ContactOptions = ({ contactOptions, userName }) => {
  const { t } = useTranslation();
  const { copy } = useClipboard();

  const getOnClickEvent = useCallback(
    contactOption => {
      switch (contactOption.contactTypeCode) {
        case "EMAIL":
          return handleEmailSending(contactOption.contactValue);
        case "PHONE":
          return copy(contactOption.contactValue);
        default:
          return undefined;
      }
    },
    [copy]
  );

  const getIconClickEvent = useCallback(
    contactOption => {
      switch (contactOption.contactTypeCode) {
        case "PROFILE_PICTURE":
          return {
            onIconClick: copy(contactOption.contactValue),
            iconTooltip: t("Generic.Copy")
          };
        default:
          return { onIconClick: undefined, iconTooltip: undefined };
      }
    },
    [copy, t]
  );

  const enrichedContactOptions = useMemo(
    () =>
      contactOptions.map(co => {
        const icon = getIcon(co);
        const tooltip = getTooltip(co);
        const label = getLabel(co, userName);
        const onClick = getOnClickEvent(co);
        const { onIconClick, iconTooltip } = getIconClickEvent(co);
        const orderNo = getOrderNumber(co);
        const option = {
          id: co.id,
          icon,
          tooltip: t(tooltip),
          label,
          link: co.contactValue,
          onClick,
          onIconClick,
          iconTooltip,
          orderNo
        };
        return option;
      }),
    [contactOptions, getOnClickEvent, getIconClickEvent, t, userName]
  );

  const sorted = useMemo(() => enrichedContactOptions.sort((a, b) => a.orderNo - b.orderNo), [enrichedContactOptions]);

  const chunks = useMemo(() => sliceContactOptions(sorted), [sorted]);

  return (
    <Grid container flex={1}>
      {chunks.map((chunk, index) => (
        <Grid size={{ xs: 12, md: 6 }} key={index}>
          <ContactOptionList options={chunk} />
        </Grid>
      ))}
    </Grid>
  );
};

ContactOptions.propTypes = {
  contactOptions: PropTypes.array,
  userName: PropTypes.string.isRequired
};

export default ContactOptions;
