import React, {useState, useEffect} from 'react'
import SelectTypeLanguagePrint from '../../../SelectTypeLanguagePrint/SelectTypeLanguagePrint'

const CheckListToDh = ({cards, mapCard}) => {
  const [checkSelectLanguage, setCheckSelectLanguage] = useState(false)
  const [selectLanguage, setSelectLanguage] = useState('')
  const [ready, setReady] = useState(false)
  const [cardsGroup] = useState([[],[],[],[],[],[],[],[]])
  const tag = 'priceArrays' // чтобы рендерить языки в SelectTypeLanguagePrint с карт где есть цены

  // отсортировать два массива по имени карточки
  // пройтись по массивам забирая нужные свойства
  // вставляя их в новый массив

  const removeDuplicateItem = (arr) => {
    return Array.from(new Set(arr.map(JSON.stringify))).map(JSON.parse)
  }

  const cardsWithoutPrice = removeDuplicateItem(cards.sort((c, n) => {
    if (c.name < n.name) return -1
    if (c.name > n.name) return 1
    return 0
  }))

  const cardsWithPrice = removeDuplicateItem(mapCard.sort((c, n) => {
    if (c.name < n.name) return -1
    if (c.name > n.name) return 1
    return 0
  }))

  const cardsMerge = () => {
    let newArr = []
    for (let i = 0; i < cardsWithPrice.length; i++) {
      newArr = newArr.concat({
        name: cardsWithPrice[i].name,
        language: cardsWithoutPrice[i] === undefined ? false : cardsWithoutPrice[i].foreignNames,
        prices: cardsWithPrice[i].usd,
        group: cardsWithoutPrice[i] === undefined
            || cardsWithoutPrice[i].colors === undefined
            || cardsWithoutPrice[i].colors.length === 0
            ?
            cardsWithoutPrice[i].type || cardsWithoutPrice[i].types[0]
            :
            cardsWithoutPrice[i].colors[0] ,
        image: cardsWithPrice[i].image
      })
    }
    // console.log(cardsWithPrice.length, cardsWithoutPrice.length)
    return newArr
  }
  let cardsReady = cardsMerge()

  useEffect(() => {
    if (cardsWithPrice.length > 0 && cardsWithoutPrice.length > 0) {
      setReady(true)
    }
  })

  const groupCard = () => {
    cardsReady.map(item => {
      switch (item.group) {
        case "White":
          return cardsGroup[0].push(item)
        case "Blue":
          return cardsGroup[1].push(item)
        case "Green":
          return cardsGroup[2].push(item)
        case "Black":
          return cardsGroup[3].push(item)
        case "Red":
          return cardsGroup[4].push(item)
        case "Land":
          return cardsGroup[5].push(item)
        case "Artifact":
          return cardsGroup[6].push(item)
        default:
          return
        }
    })
    return cardsGroup
  }

  let data = groupCard()

  // console.log(removeDuplicateItem(cardsWithPrice), removeDuplicateItem(cardsWithoutPrice))
  const selectL = (value) => {
    setCheckSelectLanguage(true)
    setSelectLanguage(value)
    console.log(value)
  }

  const renderCard = (i, lang) => {
    console.log(data)
    const groupName = data[i][0] === undefined
            ?
            ''
            :
            data[i][0].group

    const card = data.length === 0 || data[i].length !== 0 ?
      data[i].map((card, index) => {
      return (
        <div className="card-type" key={card.id + '-' + index}>
          <span className="number">{index}</span>
          <span className="price">(-.--)</span>
          <span className="name">
              {lang !== "eng" && card.language.length !== 0
                  ? card.language.map(item => {
                  if (item.language === lang) {
                      return item.name
                  }
                  if (item.language === '') {
                      return card.name
                  }
              }) : card.name}
          </span>
          <span className="checkbox"></span>
        </div>
      )
    }) : null
    return (
      <div className={'cards' + '-' + i} key={'cards' + '-' + i}>
          <h4>{groupName}</h4>
          {card ? card : null}
      </div>
    )
  }

  const generateGroupCard = (lang) => {
    let groupCardArr = []
    for (let i = 0; i < data.length; i++) {
      groupCardArr = groupCardArr.concat(renderCard(i, lang))
    }
    return groupCardArr
  }

  // console.log(renderCard())

  return (
    <div>
      <div>
        {ready ? <SelectTypeLanguagePrint cards={cardsReady} selectL={selectL} tag={tag} /> : <span>Загружаю доступные языки для печати</span>}
      </div>
      <div className="container d-flex card-groups">
        {
          ready && checkSelectLanguage ?
          generateGroupCard(selectLanguage)
          : ''
        }
      </div>
    </div>
  )
}

export default CheckListToDh