"use client";

import Box from "@mui/material/Box";

import {
  AccountCircleIcon,
  GovernmentAgencyIcon,
  HyperlinkIcon,
  TimeIcon,
  EmailIcon,
  LocationOnIcon,
  SubmitDateIcon,
} from "@/components/ui/icon";

import type { ViewMeetingSummaryDetail } from "./view-meeting-summary-data";
import {
  AgencyValue,
  DetailRow,
  DocumentRow,
  RequiredSectionTitle,
} from "./view-meeting-summary-shared";

type Props = {
  detail: ViewMeetingSummaryDetail;
};

const MEETING_REQUEST_LABEL_WIDTH = 196;
const MEETING_DETAILS_LABEL_WIDTH = 168;

export function ViewMeetingSummaryInfoSection({ detail }: Props) {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" },
        gap: { xs: 3, lg: 6 },
        mb: 4,
      }}
    >
      <Box>
        <RequiredSectionTitle>Meeting Request</RequiredSectionTitle>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <DetailRow
            icon={<AccountCircleIcon />}
            label="Private Sector WG"
            value={detail.privateSectorWg}
            labelWidth={MEETING_REQUEST_LABEL_WIDTH}
          />

          <DocumentRow
            icon={<HyperlinkIcon />}
            label="Meeting Request Document"
            path={detail.meetingRequestDocument}
            fileSize={detail.meetingRequestDocumentSize}
            labelWidth={MEETING_REQUEST_LABEL_WIDTH}
          />
        </Box>
      </Box>

      <Box>
        <RequiredSectionTitle>Meeting Details</RequiredSectionTitle>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          <DetailRow
            icon={<AccountCircleIcon />}
            label="WG Meeting"
            value={detail.wgMeeting}
            labelWidth={MEETING_DETAILS_LABEL_WIDTH}
          />

          <DocumentRow
            icon={<HyperlinkIcon />}
            label="Meeting Document"
            path={detail.meetingDocument}
            fileSize={detail.meetingDocumentSize}
            labelWidth={MEETING_DETAILS_LABEL_WIDTH}
          />

          <DetailRow
            icon={<GovernmentAgencyIcon />}
            label="Government Agency"
            labelWidth={MEETING_DETAILS_LABEL_WIDTH}
            valueNode={
              <AgencyValue
                name={detail.governmentAgency}
                logo={detail.governmentAgencyLogo}
              />
            }
          />

          <DetailRow
            icon={<EmailIcon />}
            label="Sent by"
            value={detail.sentBy}
            labelWidth={MEETING_DETAILS_LABEL_WIDTH}
          />

          <DetailRow
            icon={<TimeIcon />}
            label="Time"
            value={detail.time}
            labelWidth={MEETING_DETAILS_LABEL_WIDTH}
          />

          <DetailRow
            icon={<SubmitDateIcon />}
            label="Date"
            value={detail.date}
            labelWidth={MEETING_DETAILS_LABEL_WIDTH}
          />

          <DetailRow
            icon={<LocationOnIcon />}
            label="Location"
            value={detail.location}
            labelWidth={MEETING_DETAILS_LABEL_WIDTH}
          />
        </Box>
      </Box>
    </Box>
  );
}