"use client";
import React, { useEffect, useState, createContext } from 'react';
import axios from 'axios';
import Link from 'next/link';

function firstLetter(string: string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

  export default function Search(){
    
  const [name, setName] = useState<string>('');
  const [image, setImage] = useState<string>('');
  const [type, setType] = useState<string>('');
  const [dex, setDex] = useState<number>(1);


  function handleClick() {
    const inputValue = parseInt(document.querySelector('input')?.value || '1');
    setDex(inputValue);
  }

  useEffect(() => {
    getPokemonData();
  }, [dex]);

  
  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
    if (event.key === 'Enter') {
      handleClick();
      document.querySelector('#pokeball')?.classList.remove('hidden');
    }
  }

  async function getPokemonData() {
    try {
      const response = await axios.get(
        'https://pokeapi.co/api/v2/pokemon-form/' + dex
      );
      const pokemonData = response.data;
      const imageUrl = `https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/${dex}.svg`;
      console.log(pokemonData);
      setName(firstLetter(pokemonData.name));
      setImage(pokemonData.sprites.front_default);
      const typeNames = pokemonData.types.map((el: { type: { name: any; }; }) => el.type.name);
      setType(firstLetter(pokemonData.types[0].type.name));
    } catch (error) {
      console.error(error);
    }
  }

    return(
        <div className='flex w-80 md:w-2/4 rounded-xl bg-white'>
        <input type='search' placeholder='Search Your Pokemon' onKeyDown={handleKeyDown} className='w-full border-none bg-transparent px-4 py-1 font-mono font-semibold md:text-xl text-gray-900 outline-none focus:outline-none'/>
        <Link href="/pokemon"><button className='m-2 rounded bg-transparent px-4 py-2 text-white' onClick={handleClick}><img src="https://cdn-icons-png.flaticon.com/512/1033/1033032.png" className='w-14'/></button></Link>
        </div>
    )
  }

import { useState } from "react";
import Search from "../components/Search";

export default function Pokemon(){

    return(
        <div className="flex flex-col">
            <div id="shaper" className="w-screen h-2/4 bg-gradient-to-r from-green-400 to-green-600 fixed top-0 z-0"></div>
            <div className="z-10 flex relative justify-center items-center top-20">
                <h2 className="hidden md:flex">Sorry we are only available on mobile screen right now</h2>
            <Search/>
{/* jsx /*}
            </div>
        </div>
    )
}