import React, { useEffect } from 'react';
import { Card, Row, Col } from 'react-bootstrap';
import { TooltipDiscount } from '../Tooltip/discountTooltip';
import PlaceHolderImage from "@/assets/images/no_image_placholder.webp";
import { useTranslation } from 'react-i18next';
import HelperService from '@/Services/HelperService';


interface PropsData {
  orderDetails: any,
  items: Array<any>;
}

const OrderItems = (props: PropsData) => {

  const {t} = useTranslation();

  const [discountBreakUp, setDiscountBreakUp] = React.useState<any>([]);
  console.log(props, "props");
  const handleProductAndVariantPrice = (itemTotal: number, variants: any) => {
    let total = itemTotal.toFixed(2);
    if (variants.length > 0) {
      variants.map((variant: any) => {
        let variantTotal = variant?.base_price * variant?.quantity;
        total = (Number(variantTotal) + Number(total)).toFixed(2);
      })
    }
    return HelperService.getFormattedCurrency(total);
  };

  useEffect(() => {
    if (props?.orderDetails) {
      let breakup = [
        {
          label: "Coupon Discount",
          amount: props?.orderDetails?.discount
        },
        {
          label: "Reward Discount",
          amount: props?.orderDetails?.reward_point_discount
        },
      ];
      setDiscountBreakUp(breakup);
    }
  }, [props?.orderDetails]);

  const calculateTax = (itemTotal: number, taxRate: number) => {
    const taxAmount = (itemTotal * taxRate / 100).toFixed(2);
    return HelperService.getFormattedCurrency(Number(taxAmount));
  };

  const totalDiscountCalculate = () => {
    let coupon_discount = props?.orderDetails?.discount;
    let reward_discount = props?.orderDetails?.reward_point_discount;
    let total = Number(coupon_discount) + Number(reward_discount).toFixed(2);
    console.log(total, "total");
    return HelperService.getFormattedCurrency(Number(total));
  }

  return (
    <Card className="card-style mb-lg-4 mb-3 mx-3">
      <Card.Body>
        {props?.items && props?.items.length > 0 && (
          <>
            <Card.Title>
              <Row className="w-100 mb-3 ">
                <Col lg={3} md={3} sm={3} xs={12} className="d-flex align-items-center flex-column ">
                  <p className="fw-bold">{t('product_image')}</p>
                </Col>
                <Col lg={2} md={2} sm={2} xs={12} className="d-flex align-items-center flex-column ">
                  <p className="fw-bold">{t('product_name')}</p>
                </Col>
                <Col lg={2} md={2} sm={2} xs={12} className="d-flex align-items-center flex-column ">
                  <p className="fw-bold">{t('quantity')}</p>
                </Col>
                <Col lg={2} md={2} sm={2} xs={12} className="d-flex align-items-center flex-column ">
                  <p className="fw-bold">{t('price')}</p>
                </Col>
                <Col lg={3} md={3} sm={3} xs={12} className="d-flex align-items-center flex-column ">
                  <p className="fw-bold">{t('total')}</p>
                </Col>
              </Row>
            </Card.Title>
            <hr />
            {props.items.map((item: any, index: number) => (
              <Row key={index} className="w-100 mb-3">
                <Col lg={3} md={3} sm={3} xs={12} className="d-flex text-center">
                  <img src={item?.store_product?.product?.image?.image || PlaceHolderImage.src} alt={'no image'} className="img-thumbnail" width={150} />
                </Col>
                <Col lg={2} md={2} sm={2} xs={12} className="d-flex flex-column">
                  <span className='fw-bold'>{item?.store_product?.product?.name}</span><br />
                  {item?.customizations && item?.customizations.length > 0 && <ul key={index}>
                    {item?.customizations.map((custom: any, index: number) => {
                      return (
                        <li className="fw-bold" key={index}>{custom?.name} ({HelperService.getFormattedCurrency(custom?.base_price)})</li>
                      )
                    }
                    )}
                  </ul>}
                </Col>
                <Col lg={2} md={2} sm={2} xs={12} className="d-flex align-items-center flex-column">
                  <p className='fw-bold'>{item?.quantity}</p>
                </Col>
                <Col lg={2} md={2} sm={2} xs={12} className="d-flex align-items-center flex-column">
                  <p className='fw-bold'>{HelperService.getFormattedCurrency(item?.base_price)}</p>
                </Col>
                <Col lg={3} md={3} sm={3} xs={12} className="d-flex align-items-center flex-column">
                  <p className='fw-bold'>{handleProductAndVariantPrice(item?.quantity * item?.base_price, item?.customizations)}</p>
                </Col>
              </Row>
            ))}
          </>
        )}
        <hr />
        <Row className="w-100">
          <Col sm={12} lg={10} xs={10} className="d-flex flex-column "><span className='fw-bold'>Making Instruction :- {props?.orderDetails?.message} </span></Col>
          <Col sm={12} lg={2} xs={2} className="d-flex flex-column ">
            <div className="d-flex align-items-center">
              <div className="col-5">
                <p className="fw-bold">{t('subtotal')}:  </p>
              </div>
              <div className="col-7"><p className="fw-bold">{HelperService.getFormattedCurrency(props?.orderDetails?.sub_total)}</p></div>
              {/* <p className="fw-bold">Subtotal:  <span className='mx-2'> {HelperService.getFormattedCurrency(props?.orderDetails?.sub_total)}</span></p> */}
            </div>
            <div className="d-flex align-items-center">
              <div className="col-5">
                <p className="fw-bold">{t('tax')} ({props?.orderDetails?.taxes}%) : </p>
              </div>
              <div className="col-7">
                <p className="fw-bold"><span className='mx-2 '>{calculateTax(props?.orderDetails?.sub_total, props?.orderDetails?.taxes)}</span></p>
              </div>
            </div>
            <div className="d-flex align-items-center">
              <div className="col-5">
                <p className="fw-bold">{t('discount')}: </p>
              </div>
              <div className="col-7">
                <p className="fw-bold"><span className='mx-2'>{totalDiscountCalculate()}  <TooltipDiscount discountBreakup={discountBreakUp} position="right" /></span></p>
              </div>
            </div>
            <div className="d-flex align-items-center">
              <div className="col-5">
                <p className="fw-bold">{t('grand_total')}: </p>
              </div>
              <div className="col-7">
                <p className="fw-bold"><span className='mx-2'> {HelperService.getFormattedCurrency(props?.orderDetails?.net_amount)}</span></p>
              </div>
            </div>
          </Col>
        </Row>
      </Card.Body>
    </Card>
  );
};

export default React.memo(OrderItems);