import React from 'react';

import ScheduleRow from './ScheduleRow';
import ScheduleCell from './ScheduleCell';

const widths = [85, 85, 85, 85, 400, 150];
const colours = {
  LANDED: '#6FB165',
  ENROUTE: '#3197E5',
  CANCELLED: '#E54331',
};

const Schedule = ({ data }) => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '1rem 0',
      }}
    >
      <div
        style={{
          minHeight: '662px',
          maxHeight: '662px',
          minWidth: '1015px',
          backgroundColor: '#23252A',
          borderRadius: '8px',
          overflow: 'scroll',
        }}
      >
        <ScheduleRow bg="0" border="true">
          <ScheduleCell width={widths[0]} color="white">
            Pilot
          </ScheduleCell>
          <ScheduleCell width={widths[1]} color="white">
            Date
          </ScheduleCell>
          <ScheduleCell width={widths[2]} color="white">
            Depart
          </ScheduleCell>
          <ScheduleCell width={widths[3]} color="white">
            Arrive
          </ScheduleCell>
          <ScheduleCell width={widths[4]} color="white">
            Destination
          </ScheduleCell>
          <ScheduleCell width="15" color="white"></ScheduleCell>
          <ScheduleCell width={widths[5]} color="white">
            Gate
          </ScheduleCell>
          <ScheduleCell end="true" color="white">
            Status
          </ScheduleCell>
        </ScheduleRow>

        {data?.length > 0 &&
          data.map((row, i) => {
            return (
              <ScheduleRow bg={i % 2 === 1} key={row.id}>
                <ScheduleCell width={widths[0]}>{row.name}</ScheduleCell>
                <ScheduleCell width={widths[1]}>{row.date}</ScheduleCell>
                <ScheduleCell width={widths[2]}>{row.startTime}</ScheduleCell>
                <ScheduleCell width={widths[3]}>{row.endTime}</ScheduleCell>
                <ScheduleCell width={widths[4]}>
                  {row.description?.length
                    ? row.description
                    : row.backseat
                      ? 'backseat'
                      : undefined}
                </ScheduleCell>
                <ScheduleCell width="15" color="white"></ScheduleCell>
                <ScheduleCell width={widths[5]}>{row.location}</ScheduleCell>
                <ScheduleCell
                  end="true"
                  color={colours[row.status.toUpperCase()]}
                >
                  {row.status}
                </ScheduleCell>
              </ScheduleRow>
            );
          })}
      </div>
    </div>
  );
};

export default Schedule;