import React, { useContext, useEffect, useState } from 'react';
import { CommonMenuList, Headline } from "../component/mod";
import { UserContext } from "../state";
import { Box, Grid, Paper, Typography,Button, Theme } from "@mui/material";
import {Stack} from '@mui/material';

const useStyles = ((theme:Theme)=>({
    paper:{
        padding: theme.spacing(2),
    },
    commitable:{
        display:'grid',
        gridTemplateColumns: `100px auto`,
    },
    contentTitle:{
        marginLeft: theme.spacing(2)
    }
}));
type FileDifference = {
    type:string,
    value:{
        type:string,
        path:string,
    }[]
}


function TypeDifference(prop:{
    content:FileDifference,
    onCommit:(v:{type:string,path:string})=>void,
    onCommitAll:(type:string) => void
}){
    //const classes = useStyles();
    const x = prop.content;
    const [button_disable,set_disable] = useState(false);

    return (<Paper /*className={classes.paper}*/>
                    <Box /*className={classes.contentTitle}*/>
                    <Typography variant='h3' >{x.type}</Typography>
                    <Button variant="contained" key={x.type} onClick={()=>{
                        set_disable(true);
                        prop.onCommitAll(x.type);
                        set_disable(false);
                    }}>Commit all</Button>
                    </Box>
                        {x.value.map(y=>(
                            <Box /*className={classes.commitable}*/ key={y.path}>
                            <Button variant="contained" onClick={()=>{
                                set_disable(true);
                                prop.onCommit(y);
                                set_disable(false);
                                }}
                                disabled={button_disable}>Commit</Button>
                            <Typography variant='h5'>{y.path}</Typography>
                    </Box>
                            ))}
                </Paper>);
}

export function DifferencePage(){
    const ctx = useContext(UserContext);
    //const classes = useStyles();
    const [diffList,setDiffList] = useState<
    FileDifference[]
    >([]);
    const doLoad = async ()=>{
        const list = await fetch('/api/diff/list');
        if(list.ok){
            const inner = await list.json();
            setDiffList(inner);
        }
        else{
            //setDiffList([]);
        }
    };
    const Commit = async(x:{type:string,path:string})=>{
        const res = await fetch('/api/diff/commit',{
            method:'POST',
            body: JSON.stringify([{...x}]),
            headers:{
                'content-type':'application/json'
            }
        });
        const bb = await res.json();
        if(bb.ok){
            doLoad();
        }
        else{
            console.error("fail to add document");
        }
    }
    const CommitAll = async (type :string)=>{
        const res = await fetch("/api/diff/commitall",{
            method:"POST",
            body: JSON.stringify({type:type}),
            headers:{
                'content-type':'application/json'
            }
        });
        const bb = await res.json();
        if(bb.ok){
            doLoad();
        }
        else{
            console.error("fail to add document");
        }
    }
    useEffect(
        ()=>{
            doLoad();
            const i = setInterval(doLoad,5000);
            return ()=>{
                clearInterval(i);
            }
        },[]
    )
    const menu = CommonMenuList();
    return (<Headline menu={menu}>
        {(ctx.username == "admin") ? (<div>
            {(diffList.map(x=>
                <TypeDifference key={x.type} content={x} onCommit={Commit} onCommitAll={CommitAll}/>))}
        </div>)
        :(<Typography variant='h2'>Not Allowed : please login as an admin</Typography>)
        }
    
    </Headline>)
}