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";
import Result from "./Result.jsx";


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

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

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

    const handleEntryChange = (entry, updatedAttr) => {
        const updatedEntryList = listEntry.map((entryOnList) => {
            if (entryOnList.id === entry.id) {
                return {...entryOnList, [updatedAttr]: entry[updatedAttr]}
            }
            return entryOnList;
        });
        setListEntry(updatedEntryList);
    }

    const handleBaseSalaryChange = (baseSalaryInput) => {
        setBaseSalary(baseSalaryInput);
    }

    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 handleBaseSalaryChange={handleBaseSalaryChange}/>
                </li>
                {listEntry.map((entry) => {
                    return (
                        <div key={entry.id} style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
                            <li style={{listStyle: 'none'}} key={entry.id}>
                                <Entry
                                    propId={entry.id}
                                    propDate={entry.date}
                                    propStart={entry.start}
                                    propFinish={entry.finish}
                                    handleEntryChange={handleEntryChange}
                                />
                            </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>
            <Result listEntry={listEntry} baseSalary={baseSalary}/>
        </Container>
    )
}

export default App