import React, { useState, useEffect, state, useContext, useReducer } from "react";
import { Link } from 'react-router-dom';
import Select from 'react-select'
import config from '../../config.json'

export const SoldierProfile = (props) => {


    const [soldierInfo, setSoldierInfo] = useState(null);
    const [isLoadInfo, setIsLoadInfo] = useState(false);
    const [soldiers, setSoldiers] = useState([]);


    const getSoldiers = async () => {
        if (!soldierInfo)
            return;
        await fetch(`${config.apiRoot}/soldier`, {
            method: "get",
            headers: {
                "Content-type": "application/json; charset=UTF-8",
            },
        })
            .then(res => res.json())
            .then(res => {
                if (res.succeeded) {
                    const filterSoldiers = res.soldiers.filter((x) => { return x.side != soldierInfo.side });
                    const tmpTab = []
                    if (filterSoldiers.length != 0) {
                        filterSoldiers.map((x) => {
                            tmpTab.push({ value: x._id, label: x.name })
                        })
                        setSoldiers(tmpTab);
                    }
                }

            })

    }



    const getSoldierInfo = async (id) => {

        await fetch(`${config.apiRoot}/soldier/${id}`, {
            method: "get",
            headers: {
                "Content-type": "application/json; charset=UTF-8",
            },
        })
            .then(res => res.json())
            .then(res => {
                console.log(res)
                if (res.succeeded) {

                    setSoldierInfo(res.soldier);
                    setIsLoadInfo(true);
                }

            })
    }

    useEffect(() => {

        getSoldierInfo(props.match.params.id)
    },[])

    useEffect(() => {
    }, [isLoadInfo, soldiers])

    useEffect(() => {
        getSoldiers()
    }, [soldierInfo])


    return (
        <div className="user__view user__view--center ">
            {isLoadInfo && <>
                <div className="box  box--large">
                    <div className="box__item box__item--first box__list-soldier ">
                        <div className="box__text box__soldier-info"> {soldierInfo.name} </div>
                        <div className="box__text box__soldier-info"> Siła: {soldierInfo.strength} </div>
                        <div className="box__text box__soldier-info"> Armia: {soldierInfo.army ? soldierInfo.army : "brak"}  </div>
                        <div className="box__text box__soldier-info"> Strona: {soldierInfo.side} </div>
                        <div className="box__soldier-info--button-content">
                            <div className="button button--green button--small box__soldier-info--button"> Zmień</div>
                            <div className="button button--red button--small box__soldier-info--button"> Usuń</div>
                        </div>
                    </div>
                </div>

                <div className="box-flex-wrap " >
                    <div>
                        <div className="box box--two-inline " >
                            <div className="box__text box__text--title box__text--bottom-border ">Lista Zabitych </div>
                            {soldierInfo.kill.length != 0 && <div className="box__scroll box__scroll--min">
                                {soldierInfo.kill.map((x, index) => (
                                    <Link  to={`/soldier/${x.id}`} key={"kill-" + index} className={`box__item  box__item--link box__list-soldier box__item--first `} >
                                        <div className=" box__item--min ">
                                            <div className="box__text box__soldier-info"> {x.name} </div>
                                        </div>
                                    </Link>
                                ))}

                            </div>}
                            {soldierInfo.kill.length == 0 && <div className="box__item box__item--scroll-empty-min box__item--first ">
                                <div className="box__text ">Nie zabiłeś jeszcze nikogo</div>
                            </div>}
                        </div>

                        <div className="box box__add box--two-inline ">
                            <form onSubmit={(x) => { x.preventDefault(); }} >
                                <div className="box__text box__text--title">Dodaj Zabitego</div>
                                <div className="box__text box__item"><Select options={soldiers} /></div>

                                <div className="box__item box__button--center">
                                    <input type="submit" className="button button--small button__text" value="Dodaj" />
                                </div>
                            </form>
                        </div >
                    </div >


                    <div>
                        <div className="box box--two-inline " >
                            <div className="box__text box__text--title box__text--bottom-border ">Zabity Przez </div>
                            {soldierInfo.death.length != 0 && <div className="box__scroll box__scroll--min">
                                {soldierInfo.kill.map((x, index) => (
                                    <Link to={`/soldier/${x.id}`}  key={"kill-" + index} className="box__item box__item--link box__item--first box__list-soldier ">
                                        <div className="box__text box__soldier-info"> {x.name} </div>
                                    </Link>
                                ))}

                            </div>}
                            {soldierInfo.death.length == 0 && <div className="box__item box__item--scroll-empty-min box__item--first ">
                                <div className="box__text ">Jeszcze żyjesz</div>
                            </div>}
                        </div>

                        <div className="box box__add box--two-inline ">
                            <form onSubmit={(x) => { x.preventDefault(); }} >
                                <div className="box__text box__text--title">Dodaj zabójce</div>
                                <div className="box__text box__item"><Select options={soldiers} /></div>

                                <div className="box__item box__button--center">
                                    <input type="submit" className="button button--small button__text" value="Dodaj" />
                                </div>
                            </form>
                        </div >

                    </div>
                </div>
            </>}
        </div >

    )


}