import React from "react";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

import classNames from "classnames";
import PlusIcon from "~public/icons/Add.svg";

import "./index.scss";

// Props
interface Props extends React.ComponentPropsWithoutRef<"div"> {
  skill?: JobSkill;
  editable: boolean;
  hasJob: boolean;
}

const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
  function useJobSkillItem({ ...props }, forwardedRef) {
    const router = useRouter();
    const { t } = useTranslation("common");
    const locale =
      router.locale && ["en", "ja"].includes(router.locale)
        ? router.locale
        : "en";

    const classes = classNames({
      JobSkill: true,
      editable: props.editable,
    });

    const imageClasses = classNames({
      placeholder: !props.skill,
      editable: props.editable && props.hasJob,
    });

    const skillImage = () => {
      let jsx: React.ReactNode;

      if (props.skill) {
        jsx = (
          <img
            alt={props.skill.name[locale]}
            className={imageClasses}
            src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-skills/${props.skill.slug}.png`}
          />
        );
      } else {
        jsx = (
          <div className={imageClasses}>
            {props.editable && props.hasJob ? <PlusIcon /> : ""}
          </div>
        );
      }

      return jsx;
    };

    const label = () => {
      let jsx: React.ReactNode;

      if (props.skill) {
        jsx = <p>{props.skill.name[locale]}</p>;
      } else if (props.editable && props.hasJob) {
        jsx = <p className="placeholder">{t("job_skills.state.selectable")}</p>;
      } else {
        jsx = <p className="placeholder">{t("job_skills.state.no_skill")}</p>;
      }

      return jsx;
    };

    return (
      <div className={classes} onClick={props.onClick} ref={forwardedRef}>
        {skillImage()}
        {label()}
      </div>
    );
  }
);

export default JobSkillItem;