import { Box } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import {
  ROUTE_ADMINX_TICKET,
  ROUTE_AVICULTURE_TICKET,
  ROUTE_CITY_TICKET,
  ROUTE_GENERAL_TICKET_LIST,
  ROUTE_PROVINCE_FINANCIAL_TICKET,
  ROUTE_PROVINCE_INSPECTOR_TICKET,
  ROUTE_PROVINCE_TICKET,
  ROUTE_SLAUGHTER_TICKET,
  ROUTE_SUPER_ADMIN_TICKET,
} from "../routes/routes";
import { useLocation, useParams } from "react-router-dom";
// import { VetFarmOperations } from "../features/vet-farm/components/vet-farm-operations/VetFarmOperations";
import { TicketView } from "../features/ticket/components/ticket-view/TicketView";
import TicketList from "./TicketList";

const Tickets = () => {
  const { pathname } = useLocation();

  const { id } = useParams();

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        {/* <Grid justifyContent="center" my={SPACING.MEDIUM}>
          <Card>
            <VetFarmOperations />
          </Card>
        </Grid> */}

        <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
          <Grid xs={12} width="100%" my={SPACING.MEDIUM}>
            {(!id && pathname === ROUTE_AVICULTURE_TICKET) ||
            pathname === ROUTE_PROVINCE_FINANCIAL_TICKET ||
            pathname === ROUTE_PROVINCE_TICKET ||
            pathname === ROUTE_SLAUGHTER_TICKET ||
            pathname === ROUTE_SUPER_ADMIN_TICKET ||
            pathname === ROUTE_ADMINX_TICKET ||
            pathname === ROUTE_PROVINCE_INSPECTOR_TICKET ||
            pathname === ROUTE_CITY_TICKET ||
            pathname === ROUTE_GENERAL_TICKET_LIST ? (
              <TicketList />
            ) : (
              <TicketView />
            )}
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};
export default Tickets;
