interface Letter {
  name: string
  column: string
  row: string
  hiragana: string
  katakana: string
}

const createLetter = (name: string, column: string, row: string, hiragana: string, katakana: string, secondary = false): Letter => {
  return { name, column, row, hiragana, katakana, secondary }
}

const letters: Letter[] = [
  createLetter('A', '', 'a', 'あ', 'ア'),
  createLetter('I', '', 'i', 'い', 'イ'),
  createLetter('U', '', 'u', 'う', 'ウ'),
  createLetter('E', '', 'e', 'え', 'エ'),
  createLetter('O', '', 'o', 'お', 'オ'),
  
  createLetter('KA', 'k', 'a', 'か', 'カ'),
  createLetter('KI', 'k', 'i', 'き', 'キ'),
  createLetter('KU', 'k', 'u', 'く', 'ク'),
  createLetter('KE', 'k', 'e', 'け', 'ケ'),
  createLetter('KO', 'k', 'o', 'こ', 'コ'),
  
  createLetter('GA', 'g', 'a', 'が', 'ガ', true),
  createLetter('GI', 'g', 'i', 'ぎ', 'ギ', true),
  createLetter('GU', 'g', 'u', 'ぐ', 'グ', true),
  createLetter('GE', 'g', 'e', 'げ', 'ゲ', true),
  createLetter('GO', 'g', 'o', 'ご', 'ゴ', true),
  
  createLetter('SA', 's', 'a', 'さ', 'サ'),
  createLetter('SHI', 's', 'i', 'し', 'シ'),
  createLetter('SU', 's', 'u', 'す', 'ス'),
  createLetter('SE', 's', 'e', 'せ', 'セ'),
  createLetter('SO', 's', 'o', 'そ', 'ソ'),
  
  createLetter('ZA', 'z', 'a', 'ざ', 'ザ', true),
  createLetter('JI', 'z', 'i', 'じ', 'ジ', true),
  createLetter('ZU', 'z', 'u', 'ず', 'ズ', true),
  createLetter('ZE', 'z', 'e', 'ぜ', 'ゼ', true),
  createLetter('ZO', 'z', 'o', 'ぞ', 'ゾ', true),
  
  createLetter('TA', 't', 'a', 'た', 'タ'),
  createLetter('CHI', 't', 'i', 'ち', 'チ'),
  createLetter('TSU', 't', 'u', 'つ', 'ツ'),
  createLetter('TE', 't', 'e', 'て', 'テ'),
  createLetter('TO', 't', 'o', 'と', 'ト'),
  
  createLetter('DA', 'd', 'a', 'だ', 'ダ', true),
  createLetter('DJI', 'd', 'i', 'ぢ', 'ヂ', true),
  createLetter('DZU', 'd', 'u', 'づ', 'ヅ', true),
  createLetter('DE', 'd', 'e', 'で', 'デ', true),
  createLetter('DO', 'd', 'o', 'ど', 'ド', true),
  
  createLetter('NA', 'n', 'a', 'な', 'ナ'),
  createLetter('NI', 'n', 'i', 'に', 'ニ'),
  createLetter('NU', 'n', 'u', 'ぬ', 'ヌ'),
  createLetter('NE', 'n', 'e', 'ね', 'ネ'),
  createLetter('NO', 'n', 'o', 'の', 'ノ'),
  
  createLetter('HA', 'h', 'a', 'は', 'ハ'),
  createLetter('HI', 'h', 'i', 'ひ', 'ヒ'),
  createLetter('FU', 'h', 'u', 'ふ', 'フ'),
  createLetter('HE', 'h', 'e', 'へ', 'ヘ'),
  createLetter('HO', 'h', 'o', 'ほ', 'ホ'),
  
  createLetter('BA', 'b', 'a', 'ば', 'バ', true),
  createLetter('BI', 'b', 'i', 'び', 'ビ', true),
  createLetter('BU', 'b', 'u', 'ぶ', 'ブ', true),
  createLetter('BE', 'b', 'e', 'べ', 'ベ', true),
  createLetter('BO', 'b', 'o', 'ぼ', 'ボ', true),
  
  createLetter('PA', 'p', 'a', 'ぱ', 'パ', true),
  createLetter('PI', 'p', 'i', 'ぴ', 'ピ', true),
  createLetter('PU', 'p', 'u', 'ぷ', 'プ', true),
  createLetter('PE', 'p', 'e', 'ぺ', 'ペ', true),
  createLetter('PO', 'p', 'o', 'ぽ', 'ポ', true),
  
  createLetter('MA', 'm', 'a', 'ま', 'マ'),
  createLetter('MI', 'm', 'i', 'み', 'ミ'),
  createLetter('MU', 'm', 'u', 'む', 'ム'),
  createLetter('ME', 'm', 'e', 'め', 'メ'),
  createLetter('MO', 'm', 'o', 'も', 'モ'),
  
  createLetter('YA', 'y', 'a', 'や', 'ヤ'),
  createLetter('YU', 'y', 'u', 'ゆ', 'ユ'),
  createLetter('YO', 'y', 'o', 'よ', 'ヨ'),
  
  createLetter('RA', 'r', 'a', 'ら', 'ラ'),
  createLetter('RI', 'r', 'i', 'り', 'リ'),
  createLetter('RU', 'r', 'u', 'る', 'ル'),
  createLetter('RE', 'r', 'e', 'れ', 'レ'),
  createLetter('RO', 'r', 'o', 'ろ', 'ロ'),
  
  createLetter('WA', 'w', 'a', 'わ', 'ワ'),
  createLetter('WO', 'w', 'o', 'を', 'ヲ'),
  
  createLetter('N', '', '', 'ん', 'ン'),
]

const createLetterElement = (letter: Letter) => {
  const secondaryClass = (letter.secondary) ? ' secondary' : ''
  return (
    `<div
      class="letter${secondaryClass}"
      data-col="${letter.column}"
      data-row="${letter.row}"
      data-name="${letter.name}"
      style="grid-area: ${letter.name};">
      <span class="letter-hiragana">${letter.hiragana}</span>
      <span class="letter-katakana">${letter.katakana}</span>
      <span class="letter-name">${letter.name}</span>
    </div>`
  )
}

const lettersElements = letters.map(createLetterElement)

const domLetters = document.querySelector('.letters')

domLetters.innerHTML = lettersElements.join('')

// Controls
const toggleLettersCssClass = (cssClass) => {
  domLetters.classList.contains(cssClass) ?
    domLetters.classList.remove(cssClass) :
    domLetters.classList.add(cssClass)
}

const toggleSecondary = document.querySelector('.toggle-secondary')
const toggleSerif = document.querySelector('.toggle-serif')
const toggleKana = document.querySelector('.toggle-kana')

toggleSecondary.addEventListener('click', (evt) => {
 toggleLettersCssClass('hide-secondary')
})

toggleSerif.addEventListener('click', (evt) => {
 toggleLettersCssClass('serif')
})

toggleKana.addEventListener('click', (evt) => {
 toggleLettersCssClass('show-katakana')
})

// Search By Name
const findLetterByName = (name: string): Letter => {
  return letters.filter((letter: Letter) => {
    return letter.name.toLowerCase() === name.toLowerCase()
  })
}

const nameInput = document.querySelector('#name-input')
const nameSearch = document.querySelector('.name-search')

nameInput.addEventListener('input', (evt) => {
  const result = findLetterByName(nameInput.value)
  nameSearch.innerHTML = (result.length) ? `${result[0].hiragana} - ${result[0].katakana}` : ''
})

// Search By Hiragana
const findLetterByHiragana = (hiragana: string): Letter => {
  return letters.filter((letter: Letter) => {
    return letter.hiragana.toLowerCase() === hiragana.toLowerCase()
  })
}

const hiraganaInput = document.querySelector('#hiragana-input')
const hiraganaSearch = document.querySelector('.hiragana-search')

hiraganaInput.addEventListener('input', (evt) => {
  const result = findLetterByHiragana(hiraganaInput.value)
  hiraganaSearch.innerHTML = (result.length) ? `${result[0].name} - ${result[0].katakana}` : ''
})

// Search By Katakana
const findLetterByKatakana = (katakana: string): Letter => {
  return letters.filter((letter: Letter) => {
    return letter.katakana.toLowerCase() === katakana.toLowerCase()
  })
}

const katakanaInput = document.querySelector('#katakana-input')
const katakanaSearch = document.querySelector('.katakana-search')

katakanaInput.addEventListener('input', (evt) => {
  const result = findLetterByKatakana(katakanaInput.value)
  katakanaSearch.innerHTML = (result.length) ? `${result[0].name} - ${result[0].hiragana}` : ''
})

// Handle quizz popup display
const quizzContainer = document.querySelector('.quizz')
const showQuizzButton = document.querySelector('.show-quizz')
const closeQuizzButton = document.querySelector('.quizz .close')

showQuizzButton.addEventListener('click', (evt) => {
 quizzContainer.classList.add('active')
})

closeQuizzButton.addEventListener('click', (evt) => {
 quizzContainer.classList.remove('active')
})

// Handle quizz answer reveal
const quizzQuestion = document.querySelector('.quizz-question')
const quizzAnswer = document.querySelector('.quizz-answer')
const showQuizzAnswerButton = document.querySelector('.quizz-show-answer')

showQuizzAnswerButton.addEventListener('click', (evt) => {
 quizzAnswer.classList.add('revealed')
})

const hideQuizzAnswer = () => {
  quizzAnswer.classList.remove('revealed')
}


// Handle quizz content generation
const quizzHiraganaButton = document.querySelector('.quizz-hiragana')
const quizzKatakanaButton = document.querySelector('.quizz-katakana')
const quizzNameButton = document.querySelector('.quizz-name')

const getRandomLetter = (): Letter => {
  const randomIndex = Math.round(Math.random() * letters.length)
  return letters[randomIndex]
}

const changeQuizzContent = (questionProperty, answerProperty1, answerProperty2) => {
  hideQuizzAnswer()
  const letter: Letter = getRandomLetter()
  quizzQuestion.innerHTML = letter[questionProperty]
  quizzAnswer.innerHTML = `${letter[answerProperty1]} - ${letter[answerProperty2]}`
}

quizzHiraganaButton.addEventListener('click', (evt) => {
  changeQuizzContent('hiragana', 'name', 'katakana')
})

quizzKatakanaButton.addEventListener('click', (evt) => {
  changeQuizzContent('katakana', 'name', 'hiragana')
})

quizzNameButton.addEventListener('click', (evt) => {
  changeQuizzContent('name', 'hiragana', 'katakana')
})