import React, { useState, useEffect } from 'react';
import { Row, Col } from '../../components/grid';
import { ReposCollectionsList } from './components/cards';
import { AddCollection } from './components/collectionForm';

const apiRepoCollections = 'http://127.0.0.1:8000/api/collections/?coll_type=r';

const ReposIndex = props => {

    // STATE 
    const [collections, setCollections] = useState([]);
    useEffect(
        // GET REPOS COLLECTIONS AND SET STATE
        () => {

            const reqInit = {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                }
            }

            const getReposCollections = async () => {
                const res = await fetch(apiRepoCollections, reqInit);
                const _collections = await res.json();
                setCollections(_collections);
            }

            getReposCollections();
        },
        []
    )

    // HANDLES

    // the API calls to CRUD are called through the 
    // components, the handles is 
    // only to change the state

    // ADD NEW COLLECTION IN THE STATE
    const handleCollectionCreate = collection => {
        setCollections([...collections, collection]);
    }

    // REMOVE COLLECTION BY ID FROM THE STATE
    const handleCollectionDelete = collectionId => {
        const newCollections = [...collections]
            .filter(
                collection => {
                    return collection.id !== collectionId;
                }
            )
        setCollections(newCollections);
    }

    // REMOVE REPOSITORY FROM SPECIFIC COLLECTION STATE
    const handleRepoDelete = (collectionId, repoId) => {
        const newCollections = collections.map(
            (collection) => {
                // here is working with each collection
                // assign collection.id, collection.repos
                const {
                    id,
                    repos
                } = collection
                // if id | collection.id is different
                //  from collectionId to work
                // do noting with this
                if (id !== collectionId) {
                    return collection
                }
                // if the collection id
                // is equal from collection.id to work
                // return new object
                return {
                    // get the each old properties
                    // in the initial state
                    ...collection,
                    // overwite the repos property
                    // getting the collection.repos
                    // and filtering this
                    // to return only repos
                    // that are different from repoId to delete
                    repos: repos.filter(
                        ({ id }) => (
                            id !== repoId
                        )
                    )
                }
            }
        )
        setCollections(newCollections);
    }

    const handleRepoCreate = (collectionId, repo) => {
        const newCollections = collections.map(
            (collection) => {
                const { id, repos } = collection;
                if (id !== collectionId) {
                    return collection;
                }
                
                return {
                    ...collection,
                    repos: [...repos, repo]
                }
            }
        )

        setCollections(newCollections);
    }

    return (
        <div>
            <Row centralize="h" >
                <Col size={10}>
                    <AddCollection
                        handleCollectionSubmit={handleCollectionCreate} />
                </Col>
            </Row>
            <Row centralize="h" >
                <Col size={10}>
                    <ReposCollectionsList
                        handleCollectionDelete={handleCollectionDelete}
                        handleRepoDelete={handleRepoDelete}
                        handleRepoCreate={handleRepoCreate}
                        collections={collections}
                    />
                </Col>
            </Row>
        </div>
    )
}
export { ReposIndex };