import React from 'react';
import styled from 'styled-components';
import { StatusOptions } from '../helper';
import Divider from '../../../assets/icons/Divider';
// Import icon
import RouteIcon from '../../../assets/icons/RoutedIcon';
import SuccessIcon from '../../../assets/icons/SuccessIcon';
import DeliveredIcon from '../../../assets/icons/DeliveredIcon';
import ConfirmedIcon from '../../../assets/icons/ConfirmedIcon';
import { useStatusDetails } from '../store';

function Status() {
  const [orderStatus] = useStatusDetails();

  return (
    <Container>
      <BoxContainer>
        {StatusOptions.map((option, index) => (
          <React.Fragment key={index}>
            <TextContainer>
              {renderIcon(option.value, orderStatus)}
              <Heading>{option.label}</Heading>
            </TextContainer>
            {index < StatusOptions.length - 1 && <Divider />}
          </React.Fragment>
        ))}
      </BoxContainer>
    </Container>
  );
}

const renderIcon = (value: any, orderStatus: any) => {
  const status = orderStatus && orderStatus.length > 0 ? orderStatus[0] : null;

  if (!status) {
    return null;
  }

  if (!status) {
    return null;
  }

  switch (value) {
    case 'released':
    case 'scheduled':
    case 'routed':
    case 'confirmed':
      return status[value] ? <SuccessIcon /> : <ConfirmedIcon />;
    case 'received':
      if (status.received === 'True') {
        return <SuccessIcon />;
      } else if (status.received === 'Partial') {
        return <RouteIcon />;
      } else {
        return <ConfirmedIcon />;
      }
    case 'delivered':
      if (
        status.delivered &&
        (status.completed === false || status.completed === null)
      ) {
        return <DeliveredIcon />; //grey
      } else if (status.delivered === true && status.completed === true) {
        return <SuccessIcon />;
      } else if (status.delivered === true && status.completed === false) {
        return <RouteIcon />; //orange
      } else {
        return <ConfirmedIcon />;
      }
    default:
      return null;
  }
};

const BoxContainer = styled.div`
  border: 1px solid #e3e3e3;
  display: flex;
  justify-content: space-evenly;
  border-radius: 8px;
  background: #f8fafc;
  align-items: center;
  height: 5%;
`;

const Heading = styled.div`
  font-family: 'lato', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
`;

const Container = styled.div`
  padding: 15px;
  margin-top: 25px;
`;

const TextContainer = styled.div`
  gap: 10px;
  display: flex;
  align-items: center;
`;
export default Status;
