import { FC } from 'react';
import { Calendar } from 'react-big-calendar';
import { Stack } from '../../components';
import { Job } from '../../types/job';
import { formatDate } from '../../utils';
import { localizer } from '../../utils/calendar';

type BasicInfoProps = {
  work: Job;
};

export const BasicInfo: FC<BasicInfoProps> = ({ work }) => {
  return (
    <Stack className="h-full w-full justify-center gap-2 bg-white p-4">
      {/* <G></G> */}
      <Stack className="gap-2 p-4">
        <LabelWithText label="Job Name" value={work.jobId} />
        <LabelWithText label="Contact Person" value={work.contactPerson.name} />
        <LabelWithText
          label="Contact Person Tel"
          value={work.contactPerson.tel}
        />
        <LabelWithText label="Created At" value={formatDate(work.createdAt)} />
        <LabelWithText
          label="Expected Period"
          value={
            work.expectedStartAt
              ? `${formatDate(work.expectedStartAt)} - ${formatDate(work.expectedEndAt)}`
              : 'N/A'
          }
        />
        <LabelWithText
          label="Site Period"
          value={
            work.siteStartAt
              ? `${formatDate(work.siteStartAt)} - ${formatDate(work.siteEndAt)}`
              : 'N/A'
          }
        />
        <LabelWithText label="District" value={work.district || 'N/A'} />
        <div className="flex gap-2">
          <span className="font-medium">Description:</span>
          <p className="whitespace-pre-wrap">{work.description || 'N/A'}</p>
        </div>
      </Stack>
      <div className="h-full w-full">
        <Calendar
          localizer={localizer}
          startAccessor="start"
          endAccessor="end"
          views={['month']}
        />
      </div>
    </Stack>
  );
};

const LabelWithText: FC<{ label: string; value: string }> = ({
  label,
  value,
}) => {
  return (
    <div className="flex gap-2">
      <span className="font-medium">{label}:</span>
      <span>{value}</span>
    </div>
  );
};