import '../styles/List.css';
import LazyLoad from 'react-lazyload';
import ViewArchived from './ViewArchived';
import EditItem from './EditItem';
import { useState } from 'react'
import { Link } from "react-router-dom";

const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
    const [editBox, setEditBox] = useState(false)
    const [editIndex, setEditIndex] = useState(0)

    function edit(index) {
        setEditBox(true);
        setEditIndex(index);
    }

    function exitEditing() {
        setEditBox(false);
    }

    return (
        <div className="list">
            {editBox ? <EditItem 
                lightMode={lightMode} 
                tags={() => tags} 
                onExit={exitEditing} 
                SetLoader={SetLoader} 
                reFetch={reFetch} 
                item={data[editIndex]} 
            /> : null}
            {/* eslint-disable-next-line */}
            {data.map((e, i, array) => {
                try {
                    const url = new URL(e.link);
                    const favicon = 'https://www.google.com/s2/favicons?domain=' + url.hostname;
                    return (<LazyLoad key={i} height={200} offset={200}>
                        <div className="list-row">
                            <div className="img-content-grp">
                                <img alt='' src={favicon} />
                                <div className="list-entity-content">
                                    <div className='row-name'>
                                        <span className="num">{i + 1}.</span> 
                                        {e.name} 
                                        <a 
                                            className='link' 
                                            target="_blank" 
                                            rel="noreferrer" 
                                            href={e.link}
                                        >
                                            ({url.hostname})
                                        </a>
                                    </div>
                                    <div className='title'>{e.title}</div>
                                    <div className="tags">
                                        {e.tag.map((e, i) => {
                                            const tagPath = `/tags/${e}`;
                                            return (<Link to={tagPath} key={i}>{e}</Link>)
                                        })}
                                    </div>
                                    <div className='date'>{new Date(e.date).toDateString()}</div>
                                </div>
                            </div>
                            <div className='etc'>
                                <ViewArchived className='view-archived' id={e._id} />
                                <button className="btn edit-btn" onClick={() => edit(i)}>&#xf303;</button>
                            </div>
                        </div>
                    </LazyLoad>)
                } catch (e) {
                    console.log(e);
                }
            })}
        </div>
    )
}

export default List