import { Box, Grid, Paper, Typography } from "@mui/material";
import { SeasonTicketContract } from "api/season-ticket-contract";
import { useSeasonTicketContractContext } from "contexts/dashboard/SeasonTicketContractContext";
import useDashboard from "hooks/useDashBoard";
import useNavigateCustom from "hooks/useNavigateCustom";
import { PageID, TabID } from "pages";
import { useEffect } from "react";
import { getPath } from "routes/path";

function SeasonTicketContractCard({ data }: { data: SeasonTicketContract }) {
  const { navigateWhenChanged } = useNavigateCustom();
  const handleClick = () => {
    navigateWhenChanged(
      getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_DETAIL, {
        query: {
          id: data.season_ticekt_contract_record_no ?? "",
        },
      })
    );
  };
  return (
    <Paper sx={{ p: 2, cursor: "pointer" }} onClick={handleClick}>
      <Typography variant="h5">{data.parking_name}</Typography>
      <Typography variant="h6">区画:{data.room_no}</Typography>
    </Paper>
  );
}

export default function ContractList() {
  const { setHeaderTitle, setTabs } = useDashboard(
    PageID.DASHBOARD_SEASON_TICKET_CONTRACT_LIST,
    TabID.NONE
  );

  const { seasonTicketContracts } = useSeasonTicketContractContext();

  const { navigateWhenChanged } = useNavigateCustom();

  const moveToDetail = () => {
    navigateWhenChanged(
      getPath(PageID.DASHBOARD_SEASON_TICKET_CONTRACT_DETAIL, {
        query: {
          id: "test-test",
        },
      })
    );
  };

  useEffect(() => {
    setHeaderTitle("契約一覧");
    setTabs(null);
  }, [setHeaderTitle, setTabs]);
  return (
    <Box sx={{ p: 1, m: 1 }}>
      <Grid container spacing={2}>
        {seasonTicketContracts.map((item, index) => {
          return (
            <Grid item xs={12} md={6} key={index}>
              <SeasonTicketContractCard data={item} />
            </Grid>
          );
        })}
      </Grid>
    </Box>
  );
}