'use client';

import { getSpells } from '@/api/spells';
import { Spell } from '@/api/spells.types';
import SpellModal from '@/components/SpellModal';
import React, { useEffect, useState } from 'react';
import './spells.css';
import { Box, TextInput } from '@mantine/core';
import { AiOutlineVerticalAlignTop } from 'react-icons/ai';

export default function Page() {
  const [cantrips, setCantrips] = useState<Spell[]>([]);
  const [level1, setLevel1] = useState<Spell[]>([]);
  const [level2, setLevel2] = useState<Spell[]>([]);
  const [level3, setLevel3] = useState<Spell[]>([]);
  const [level4, setLevel4] = useState<Spell[]>([]);
  const [level5, setLevel5] = useState<Spell[]>([]);
  const [level6, setLevel6] = useState<Spell[]>([]);
  const [level7, setLevel7] = useState<Spell[]>([]);
  const [level8, setLevel8] = useState<Spell[]>([]);
  const [level9, setLevel9] = useState<Spell[]>([]);
  const [activeSpell, setActiveSpell] = useState<Spell | undefined>(undefined);
  const [isOpen, setIsOpen] = useState(false);
  const [searchName, setSearchName] = useState('');

  useEffect(() => {
    getSpells({ levels: [0] }).then((s) => setCantrips(s.data));
    getSpells({ levels: [1] }).then((s) => setLevel1(s.data));
    getSpells({ levels: [2] }).then((s) => setLevel2(s.data));
    getSpells({ levels: [3] }).then((s) => setLevel3(s.data));
    getSpells({ levels: [4] }).then((s) => setLevel4(s.data));
    getSpells({ levels: [5] }).then((s) => setLevel5(s.data));
    getSpells({ levels: [6] }).then((s) => setLevel6(s.data));
    getSpells({ levels: [7] }).then((s) => setLevel7(s.data));
    getSpells({ levels: [8] }).then((s) => setLevel8(s.data));
    getSpells({ levels: [9] }).then((s) => setLevel9(s.data));
  }, []);

  return (
    <Box style={{ width: '60%', margin: 'auto' }}>
      <h1>Spells</h1>
      <TextInput
        label='Search by name'
        placeholder='Acid Splash...'
        onChange={(e) => setSearchName(e.target.value)}
        style={{ width: '25%' }}
      />
      <SpellSection
        title='Cantrips'
        spells={cantrips.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
        onClick={(spell) => {
          setActiveSpell(spell);
          setIsOpen(true);
        }}
      />
      <hr />
      {activeSpell && <SpellModal spell={activeSpell} isOpen={isOpen} onClose={() => setIsOpen(false)} />}
    </Box>
  );
}

function SpellSection({ title, spells, onClick }: { title: string; spells: Spell[]; onClick: (spell: Spell) => void }) {
  const isBrowser = () => typeof window !== 'undefined'; //The approach recommended by Next.js

  function scrollToTop() {
    if (!isBrowser()) return;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  return (
    <Box>
      <h2>{title}</h2>
      <ul>
        {spells.map((spell) => (
          <li
            key={spell.id}
            className='link spell-item'
            style={{ width: 'fit-content' }}
            onClick={() => onClick(spell)}
          >
            {spell.name}
          </li>
        ))}
      </ul>
      <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', color: 'gray' }} onClick={scrollToTop}>
        <span style={{ paddingRight: '0.2em' }}>Back to top</span>
        <AiOutlineVerticalAlignTop />
      </div>
    </Box>
  );
}