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>(
  ({ ...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