import { FlagAlert } from '@bjsdistribution/dms-component-library';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { useOrderNotify } from '../order-actions/store';
import { useOrderStaticData } from '../store';

function OrderTemplate({ orderDetails, routeInfoData }: any) {
  const [, setOrderCount] = useOrderNotify();
  const precall = false;
  const [orderStaticData] = useOrderStaticData();
  const statusVal = routeInfoData?.status_value;

  const unholdReasons = orderStaticData?.cancellation_reasons?.map(
    (x: any) => ({
      id: x?.id,
      reason: x?.reason,
    })
  );

  const getReasonById = (id: number) => {
    if (!unholdReasons || unholdReasons?.length === 0) {
      return 'Reason not found';
    }
    const match = unholdReasons?.find((item: any) => item?.id === id);
    return match ? match?.reason : 'Reason not found';
  };

  const reason = getReasonById(orderDetails?.order_cancellations?.reason_id);

  const [alertVisibility, setAlertVisibility] = useState({
    isHoldVisible: true,
    isCompleted: true,
    isOutstanding: true,
    isAwaitingConfirmation: true,
    isAwaitingRoute: true,
    isCancelled: true,
    isEnroute: true,
    isPreCall: true,
    isConfirmed: true,
    isPostcode: true,
  });

  useEffect(() => {
    if (precall) {
      setOrderCount(prevCount => prevCount + 1);
    }
  }, [precall]);

  //on close alert functionality
  const onCloseAlert = (alertType: string) => {
    setAlertVisibility(prev => ({
      ...prev,
      [alertType]: false,
    }));
    setOrderCount(0);
  };

  return (
    <>
      {statusVal == 'on hold' && alertVisibility?.isHoldVisible && (
        <StyledAlert>
          <FlagAlert
            type="warn"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={''}
            showOkButton={false}
            onClose={() => onCloseAlert('isHoldVisible')}
          />
        </StyledAlert>
      )}
      {statusVal == 'complete' && alertVisibility.isCompleted && (
        <StyledAlert>
          <FlagAlert
            type="success"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={''}
            showOkButton={false}
            onClose={() => onCloseAlert('isCompleted')}
          />
        </StyledAlert>
      )}

      {precall && alertVisibility.isPreCall && (
        <StyledAlert>
          <FlagAlert
            type="success"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={``}
            showOkButton={false}
            onClose={() => onCloseAlert('isPreCall')}
          />
        </StyledAlert>
      )}

      {statusVal == 'outstanding' && alertVisibility.isOutstanding && (
        <StyledAlert>
          <FlagAlert
            type="release"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={``}
            showOkButton={false}
            onClose={() => onCloseAlert('isOutstanding')}
          />
        </StyledAlert>
      )}
      {statusVal == 'awaiting confirmation' &&
        alertVisibility.isAwaitingConfirmation && (
          <StyledAlert>
            <FlagAlert
              type="info"
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: routeInfoData?.order_alert,
                  }}
                ></div>
              }
              description={``}
              showOkButton={false}
              onClose={() => onCloseAlert('isAwaitingConfirmation')}
            />
          </StyledAlert>
        )}
      {statusVal == 'awaiting route' && alertVisibility.isAwaitingRoute && (
        <StyledAlert>
          <FlagAlert
            type="info"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={``}
            showOkButton={false}
            onClose={() => onCloseAlert('isAwaitingRoute')}
          />
        </StyledAlert>
      )}
      {statusVal == 'cancelled' && alertVisibility.isCancelled && (
        <StyledAlert>
          <FlagAlert
            type="error"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={reason}
            showOkButton={false}
            onClose={() => onCloseAlert('isCancelled')}
          />
        </StyledAlert>
      )}
      {statusVal == 'enroute' && alertVisibility.isEnroute && (
        <StyledAlert>
          <FlagAlert
            type="info"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={``}
            showOkButton={false}
            onClose={() => onCloseAlert('isEnroute')}
          />
        </StyledAlert>
      )}

      {statusVal == 'confirmed' && alertVisibility.isConfirmed && (
        <StyledAlert>
          <FlagAlert
            type="info"
            title={
              <div
                dangerouslySetInnerHTML={{
                  __html: routeInfoData?.order_alert,
                }}
              ></div>
            }
            description={``}
            showOkButton={false}
            onClose={() => onCloseAlert('isConfirmed')}
          />
        </StyledAlert>
      )}

      {routeInfoData?.same_postcode_orders && alertVisibility.isPostcode && (
        <FlagAlert
          type="info"
          title=""
          description={
            <FlagsStyle>
              <div className="postcode-alert-content">
                <div
                  dangerouslySetInnerHTML={{
                    __html: routeInfoData.same_postcode_orders,
                  }}
                />
              </div>
            </FlagsStyle>
          }
          showOkButton={false}
          onClose={() => onCloseAlert('isPostcode')}
        />
      )}
    </>
  );
}

const FlagsStyle = styled.div`
  .postcode-alert-content {
    > div {
      > h4 {
        color: #3a3630;
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
      }
    }
    ul {
    }

    li {
      border-radius: 6px;
      list-style-type: none;
      > a {
        color: #6396e5;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        text-decoration: none;
      }
      > strong {
        > a {
          color: #6396e5;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          line-height: 24px;
          text-decoration: none;
        }
      }
    }

    li.outstanding strong,
    li.awaiting_confirmation strong,
    li.awaiting_route strong {
      font-family: Roboto, sans-serif;
      font-size: 14px;
      font-weight: 600;
      line-height: 24px;
      font-style: normal;
    }
    li.routed strong {
      margin-left: 5px;
      color: #3a3630;
      font-family: Lato;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 18px;
    }

    li.outstanding strong {
      color: #e95252;
    }
    li.awaiting_confirmation strong {
      color: #6396e5;
    }
    li.awaiting_route strong {
      color: #36a053;
    }
    li.confirmed strong {
      color: #36a053;
    }
    li.enroute strong {
      color: #36a053;
    }
    li.cancelled strong {
      color: #e95252;
    }
    li.complete strong {
      color: #36a053;
    }
    li.on_hold strong {
      color: #feba30;
    }
    li.routed strong {
      color: #3a3630;
    }
    span {
      margin-left: 5px;
      color: #3a3630;
      font-family: Lato;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 18px;
    }
  }
`;

const StyledAlert = styled.div`
  margin-bottom: 5px;
`;

export default OrderTemplate;
