import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'

import styles from './index.module.scss'

interface Props {
  grid: {
    mainSummon: GridSummon | undefined
    friendSummon: GridSummon | undefined
    allSummons: GridArray<GridSummon>
  }
}

const SUMMONS_COUNT = 4

const SummonRep = (props: Props) => {
  // Localization for alt tags
  const router = useRouter()
  const locale =
    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'

  // Component state
  const [mainSummon, setMainSummon] = useState<GridSummon>()
  const [summons, setSummons] = useState<GridArray<Summon>>({})
  const [grid, setGrid] = useState<GridArray<GridSummon>>({})

  // On grid update
  useEffect(() => {
    const newSummons = Array(SUMMONS_COUNT)
    const gridSummons = Array(SUMMONS_COUNT)

    if (props.grid.mainSummon) {
      setMainSummon(props.grid.mainSummon)
    }

    if (props.grid.allSummons) {
      for (const [key, value] of Object.entries(props.grid.allSummons)) {
        if (value) {
          newSummons[value.position] = value.object
          gridSummons[value.position] = value
        }
      }
    }

    setSummons(newSummons)
    setGrid(gridSummons)
  }, [props.grid])

  // Methods: Image generation
  function generateMainImage() {
    let url = ''

    const upgradedSummons = [
      '2040094000',
      '2040100000',
      '2040080000',
      '2040098000',
      '2040090000',
      '2040084000',
      '2040003000',
      '2040056000',
      '2040020000',
      '2040034000',
      '2040028000',
      '2040027000',
      '2040046000',
      '2040047000',
    ]

    if (mainSummon) {
      // Change the image based on the uncap level
      let suffix = ''
      if (mainSummon.object.uncap.xlb && mainSummon.uncapLevel == 6) {
        if (
          mainSummon.transcendenceStep >= 1 &&
          mainSummon.transcendenceStep < 5
        ) {
          suffix = '_03'
        } else if (mainSummon.transcendenceStep === 5) {
          suffix = '_04'
        }
      } else if (
        upgradedSummons.indexOf(mainSummon.object.granblueId.toString()) !=
          -1 &&
        mainSummon.uncapLevel == 5
      ) {
        suffix = '_02'
      }

      url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-main/${mainSummon.object.granblueId}${suffix}.jpg`
    }

    return mainSummon && <img alt={mainSummon.object.name[locale]} src={url} />
  }

  function generateGridImage(position: number) {
    let url = ''

    const summon = summons[position]
    const gridSummon = grid[position]

    const upgradedSummons = [
      '2040094000',
      '2040100000',
      '2040080000',
      '2040098000',
      '2040090000',
      '2040084000',
      '2040003000',
      '2040056000',
      '2040020000',
      '2040034000',
      '2040028000',
      '2040027000',
      '2040046000',
      '2040047000',
    ]

    if (summon && gridSummon) {
      // Change the image based on the uncap level
      let suffix = ''
      if (gridSummon.object.uncap.xlb && gridSummon.uncapLevel == 6) {
        if (
          gridSummon.transcendenceStep >= 1 &&
          gridSummon.transcendenceStep < 5
        ) {
          suffix = '_03'
        } else if (gridSummon.transcendenceStep === 5) {
          suffix = '_04'
        }
      } else if (
        upgradedSummons.indexOf(summon.granblueId.toString()) != -1 &&
        gridSummon.uncapLevel == 5
      ) {
        suffix = '_02'
      }

      url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblueId}${suffix}.jpg`
    }

    return (
      summons[position] && (
        <img alt={summons[position]?.name[locale]} src={url} />
      )
    )
  }

  // Render
  return (
    <div className={styles.rep}>
      <div className={styles.mainSummon}>{generateMainImage()}</div>
      <ul className={styles.summons}>
        {Array.from(Array(SUMMONS_COUNT)).map((x, i) => {
          return (
            <li key={`summons-${i}`} className={styles.summon}>
              {generateGridImage(i)}
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default SummonRep
