import {useEffect, useState} from "react";
import Entry from "./Entry.jsx";

import {Button, Container, Typography} from "@mui/material";
import dayjs from "dayjs";
import SalaryInput from "./SalaryInput.jsx";


function App() {
    const [listEntry, setListEntry] = useState(
        [
            {id: 0, date: dayjs(), start: dayjs(), finish: dayjs()},
        ]
    );
    const [removeDisabled, setRemoveDisabled] = useState(false);
    // const [lastId, setLastId] = useState(0);

    useEffect(() => {
        setRemoveDisabled(listEntry.length === 1);
    }, [listEntry]);

    const getLastId = () => {
        const lastEntry = listEntry[listEntry.length - 1];
        return lastEntry.id;
    }

    const addToList = () => {
        const newEntry = {
            id: getLastId() + 1,
            date: dayjs(),
            start: dayjs(),
            finish: dayjs()
        }
        setListEntry((currentList) => [...currentList, newEntry]);
    }

    const removeFromList = (id) => {
        setListEntry((currentList) => {
            return currentList.filter((en) => en.id !== id);
        });
    }

    return (
        <Container>
            <Typography variant='h3' align='center'>Overtime Calculator</Typography>
            <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini? 🤑🤑</Typography>
            <ul>
                <li style={{listStyle: 'none', margin: '20px 0'}}>
                    <SalaryInput/>
                </li>
                {listEntry.map((entry) => {
                    return (
                        <div key={entry.id} style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
                            <li style={{listStyle: 'none'}} key={entry.id}>
                                <Entry
                                    propDate={entry.date}
                                    propStart={entry.start}
                                    propFinish={entry.finish}
                                />
                            </li>
                            <Button
                                disabled={removeDisabled}
                                variant="outlined"
                                onClick={() => removeFromList(entry.id)}
                            >Hapus</Button>
                            {
                                entry.id === getLastId() ?
                                    <Button
                                        variant="outlined"
                                        onClick={addToList}
                                    >Tambah</Button>
                                    : null
                            }
                        </div>
                    )
                })}
            </ul>
        </Container>
    )
}

export default App
