import React, { useState } from "react";
import styles from './AddWord.module.scss';
import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg';
import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg';
import { ReactComponent as AddIcon } from '../../assets/icons/plus.svg';

import { IWord } from "../../structure/word";
import { ALL_WORDS } from "../../data/all-words";
import { NavLink } from "react-router-dom";
import { userProfileData } from "../../App";

export const AddWord: React.FC = () => {
    const [searchWordResult, setSearchResult] = useState<Array<IWord>>([]);
    const [selectedWord, setSelectedWord] = useState<IWord>();

    const searchWords = (searchWord: string) => {
        if (searchWord.length > 0) {
            let result = ALL_WORDS.filter((word) => {
                return word.name.toLowerCase().includes(searchWord.toLowerCase());
            });
            
            setSearchResult(result);
        } else {
            setSearchResult([]);
        }
    }

    return <section className="modalPage">
        <header className={styles.navHeader}>
            <button onClick={() => {
                if (selectedWord) {
                    setSelectedWord(undefined);
                } else {
                    window.history.back()
                }
            }}>
                <ChevronLeft />
            </button>
            { !selectedWord && <h5> Add a Word </h5> }
            { selectedWord && <h5> Add to Shelf </h5> }
            
            <figure style={{ opacity: selectedWord ? 0 : 1 }}>
                {/* eslint-disable-next-line */}
                <img src={ userProfileData.image } alt="profile-image" />
            </figure>
        </header>

        { !selectedWord && <section>
            <div className={styles.searchBarHolder}>
                <div className={styles.searchBar}>
                    <input type="text" autoFocus={true} placeholder={'Search and add a word'} onChange={(event) => searchWords(event.currentTarget.value)} />
                    <SearchIcon />
                </div>
            </div>

            <ul className={styles.searchResult}>
                { searchWordResult.map((word) => {
                    return <li key={word.name}>
                        <header>
                            <h4> { word.name } <span> { word.pronounciation } </span> </h4>
                            <button>
                                <SpeakerIcon />
                            </button>
                        </header>
                        <div className={styles.description}>
                            <span> { word.grammaticalDetails[0].typeName } </span>
                            <p> { word.grammaticalDetails[0].description } </p>
                        </div>
                        <button className={styles.addButton} onClick={() => setSelectedWord(word)}> <AddIcon />  Add </button>
                    </li>
                }) }
            </ul>
        </section> }


        { selectedWord && <section>
            <div className={styles.searchBarHolder}>
                <div className={styles.searchBar}>
                    <input type="text" placeholder={'Search shelves'}/>
                    <SearchIcon />
                </div>
            </div>

            <ul className={styles.shelfList}>
                <header>
                    <h5> All Shelves </h5>
                </header>
                { userProfileData.categories.map((category, categoryIndex) => {
                    return category.shelves.map((shelf, shelfIndex) => {
                        return <li key={shelf.name} onClick={() => {
                            userProfileData.categories[categoryIndex].shelves[shelfIndex].words.push(selectedWord);
                        }}>
                            <div className={styles.icon}>
                                { category.icon }
                            </div>
                            <div className={styles.info}>
                                <label> { shelf.name } </label>
                                <span> { category.name } </span>
                            </div>
                        </li>
                    })
                }) }

                <NavLink to={'/add-shelf'} className={styles.AddShelfButton}> <span> <AddIcon /> </span> Create New Shelf </NavLink>
            </ul>
        </section> }
        
    </section>
}