import * as React from "react";

import { PropTypes } from "prop-types";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { Grid } from "../../../../components/grid/Grid";
import {
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from "@mui/lab";
import { Typography } from "@mui/material";
import { SPACING } from "../../../../data/spacing";

export const InspectorInformation = ({ data }) => {
  return (
    <>
      <TimelineItem sx={{ alignSelf: "flex-start", width: "100%" }}>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <Grid container direction="column" flexWrap="nowrap" flex="1">
          <Grid container>
            <Grid>
              <TimelineOppositeContent>
                <Typography variant="body1" fontWeight="bold">
                  اطلاعات تایید نهایی بازرس
                </Typography>
              </TimelineOppositeContent>
            </Grid>
            <Grid>
              <TimelineContent color="textSecondary">
                <Grid container gap={SPACING.SMALL}>
                  <Typography
                    variant="body2"
                    display="flex"
                    gap={SPACING.SMALL}
                  >
                    وضعیت نهایی پرونده بررسی شده توسط بازرس در این مرحله نمایش
                    داده شده است.
                  </Typography>
                </Grid>
              </TimelineContent>
            </Grid>
          </Grid>
          <Grid container>
            <Grid xs={12}>
              <SimpleTable
                columns={["نام بازرس", "تاریخ ثبت", "پیغام", "وضعیت"]}
                data={[
                  [
                    data.inspectorName,
                    new Date(data.acceptRejectDate),
                    data.message ? data.message : "-",
                    data.state === "accepted" ? "تایید شده" : "ابراز مشکل",
                  ],
                ]}
              />
            </Grid>
          </Grid>
        </Grid>
      </TimelineItem>
    </>
  );
};

InspectorInformation.propTypes = {
  data: PropTypes.any,
};
