import React, { FC, useEffect, useState } from 'react'
import {
  EnvironmentalData,
  LeadTime,
  MetaData,
  PickupPoint as PickupPointData,
  PostenBringShippingOptions,
} from '../../posten-bring-checkout-block/model/models'
import bringLogo from '../../../../assets/img/Bring_logo.svg'
import postenLogo from '../../../../assets/img/Posten_logo.svg'

export declare interface CartSummaryProps {
  cart: Cart
  darkMode?: boolean
}

interface ShippingRate {
  rate_id: string
  selected: boolean
  meta_data: Array<MetaData>
}

export interface Cart {
  shippingRates: Array<WooShippingRate>
}

export interface WooShippingRate {
  shipping_rates: Array<ShippingRate>
}

const CartSummary: FC<CartSummaryProps> = ({ cart, darkMode }) => {
  const [postenBringSelected, setPostenBringSelected] = useState<boolean>(false)

  const selectedShippingRate = cart?.shippingRates[0]?.shipping_rates?.find(
    (it: ShippingRate) => it.selected
  ) as ShippingRate | undefined
  const selectedShippingOption = selectedShippingRate?.rate_id
  const metaData: Array<MetaData> = selectedShippingRate?.meta_data || []

  const brand = metaData.find(it => it.key === 'brand')?.value as string
  const serviceName = metaData.find(it => it.key === 'service_name')
    ?.value as string
  const pickupPoints = metaData.find(it => it.key === 'pickup_points')
    ?.value as Array<PickupPointData> | [] as PickupPointData[]
  const leadTime = metaData.find(it => it.key === 'lead_time')
    ?.value as LeadTime
  const environmentalData = metaData.find(it => it.key === 'environmental_data')
    ?.value as EnvironmentalData | undefined

  useEffect(() => {
    setPostenBringSelected(
      selectedShippingOption !== undefined &&
        [
          PostenBringShippingOptions.PARCEL_LOCKER,
          PostenBringShippingOptions.PIKCUP_POINT,
          PostenBringShippingOptions.HOME_DELIVERY,
          PostenBringShippingOptions.MAILBOX,
          PostenBringShippingOptions.GROUPAGE,
          PostenBringShippingOptions.PALLET,
          PostenBringShippingOptions.PARCEL_TO_BUSINESS,
          // @ts-expect-error 2345
        ].includes(selectedShippingOption)
    )
  }, [selectedShippingOption, setPostenBringSelected, leadTime])

  const logo = brand === 'Bring' ? bringLogo : postenLogo

  return (
    postenBringSelected && (
      <div
        id="posten-bring-checkout-cart"
        data-testid="cart"
        className={darkMode ? 'dark' : ''}
      >
        <div className="container mbs">
          <div className="flex flex-dir-row justify-csb align-ife">
            {serviceName && <div className="service-name">{serviceName}</div>}
            <div>
              <img
                className="logo"
                src={logo}
                alt=""
                data-testid={`logo_${brand}`}
              />
            </div>
          </div>
          {leadTime && (
            <div className="text-1r mts">{leadTime.description}</div>
          )}
          {pickupPoints?.[0]?.leadTime?.description && (
            <>
              <div className="text-1r mts">
                {pickupPoints?.[0]?.displayName}
              </div>
              <div className="text-0.875r">
                {pickupPoints?.[0]?.leadTime?.description}
              </div>
            </>
          )}
          {environmentalData?.fossilFree && (
            <div className="environmental mts" data-testid="environmental">
              <img src={environmentalData.tagUrl} alt="" />
            </div>
          )}
        </div>
      </div>
    )
  )
}

export default CartSummary
