"use client";

import { useState } from "react";
import Button from "@mui/material/Button";
import { t } from "i18next";
import { Card, Modal, Typography } from "@mui/material";
import TimesheetInputGrid from "./TimesheetInputGrid";
import { BASE_API_URL } from "@/config/api";

// import { fetchTimesheets } from "@/app/api/timesheets";

interface EnterTimesheetModalProps {
  isOpen: boolean;
  onClose: () => void;
  modalStyle?: any;
}

const EnterTimesheetModal: React.FC<EnterTimesheetModalProps> = ({
  ...props
}) => {
  const [lockConfirm, setLockConfirm] = useState(false);
  const columns = [
    {
      id: "projectCode",
      field: "projectCode",
      headerName: "Project Code and Name",
      flex: 1,
    },
    {
      id: "task",
      field: "task",
      headerName: "Task",
      flex: 1,
    },
  ];

  const rows = [
    {
      id: 1,
      projectCode: "M1001",
      task: "1.2",
    },
    {
      id: 2,
      projectCode: "M1301",
      task: "1.1",
    },
  ];

  const fetchTimesheet = async () => {
    // fetchTimesheets();
    // const res = await fetch(`http://localhost:8090/api/timesheets`, {
    // // const res = await fetch(`${BASE_API_URL}/timesheets`, {
    //   method: "GET",
    //   mode: 'no-cors',
    // });

    // console.log(res.json);
  };

  return (
    <Modal open={props.isOpen} onClose={props.onClose}>
      <div>
        {/* <Typography variant="h5" id="modal-title" sx={{flex:1}}>
            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
              Timesheet Input 
            </div>
          </Typography> */}

        <Card style={{
            flex: 10,
            marginBottom: "20px",
            width: "90%",
            // height: "80%",
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
          }}>
          <TimesheetInputGrid setLockConfirm={setLockConfirm}/>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              width: "100%",
              flex: 1,
              padding: "20px",
            }}
          >
            <Button
              disabled={lockConfirm}
              variant="contained"
              onClick={props.onClose}
            >
              Confirm
            </Button>
            <Button
              variant="contained"
              onClick={props.onClose}
              sx={{ "background-color": "#F890A5" }}
            >
              Cancel
            </Button>
          </div>
        </Card>
      </div>
    </Modal>
  );
};

export default EnterTimesheetModal;