import { FC, useEffect, useState } from "react";
import MyOrdersList from "../myOrdersList";
import styles from "./addReview.module.scss";
import cx from "classnames";
import { Button, Image, Input, notification, Rate } from "antd";
import * as AddReviewApi from "../../../../pages/api/review";
import { s3BucketUrl } from "../../../../constants/urls";

const AddReview: FC<any> = ({pageTitle}) => {
  const [isBack, setIsBack] = useState(false);
  const [star, setStar] = useState(0);
  const [comment, setComment] = useState("");
  const [title, setTitle] = useState("");
  const [product,setProduct] = useState<any>({});
  const isBackHandler = () => {
    setStar(0);
    setComment("");
    setTitle("");
    setIsBack(true);
  };
  
  useEffect(() => {
   const val:any = localStorage.getItem("OrderItems");
   const details:any = JSON.parse(val);
   setProduct(details);
  }, [])

  const addReview=()=>{
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
 
   
      if(star===0){
          notification.error({message:"Please Select Rating"});
      }else if(title===""){
        notification.error({message:"Please Enter Title"});
      }else if(comment===""){
        notification.error({message:"Please Enter Comment"});
      }else{
        if(pageTitle==="product"){
      const params={
        product_id:product?.additional?.product_id,
        rating:star,
        title:title,
        comment:comment,
        token:details?.token
      }
      AddReviewApi.addReview(params).then((res)=>{
        notification.success({message:res?.message})
          localStorage.removeItem("OrderItems");
          isBackHandler();
      })
    }else if(pageTitle==="seller"){
      const params={
        seller_id:product?.items?.[0]?.additional?.seller_info?.mp_seller_id,
        rating:star,
        title:title,
        comment:comment,
        token:details?.token,
        customer_id:details?.data?.id
      }
      AddReviewApi.sellerReview(params).then((res)=>{
      
        notification.success({message:res?.message})
          localStorage.removeItem("OrderItems");
          isBackHandler();
      })
    }
      else if(pageTitle==="delivery"){
        const params={
          order_id:product.id,
          seller_id:product?.items?.[0]?.additional?.seller_info?.seller_id,
          rating:star,
          title:title,
          comment:comment,
          token:details?.token,
          customer_id:details?.data?.id
        }
        AddReviewApi.deliveryReview(params).then((res)=>{
        
          notification.success({message:res?.message})
            localStorage.removeItem("OrderItems");
            isBackHandler();
        })
      
    }
  }
  }

  return !isBack ? (
    <>
      <div className={styles.tabContainer}>
        <div className={cx(styles.headerRow, "ant-row")}>
          <div
            className={cx(styles.titleStyles, "ant-col-xl-18 ant-col-xs-16")}
          >
            {pageTitle==="product"?"Write a Review":pageTitle==="delivery"?" Delivery FeedBack":pageTitle==="seller"?"Seller FeedBack":null}
          </div>
          <div className="ant-col-xl-6 ant-col-xs-8 px-4">
            <span onClick={isBackHandler}>&#60; Back</span>
          </div>
        </div>
        {pageTitle==="product"?<div className={cx("ant-row",styles.rowMoblie)}>
            <div className="ant-col ant-col-xs-6 ant-col-md-8 ant-col-xl-3">
                <Image src={product?.product?.base_image?.path===undefined ?product?.product?.base_image?.large_image_url:s3BucketUrl + product?.product?.base_image?.path}   width="93px"
                      height="93px"/>
            </div>
            <div className="ant-col ant-col-xs-18 ant-col-md-16 ant-col-xl-16">
               <div>{product?.name}</div> 
               <div className="ant-row">
                      <span>by &nbsp;</span>
                      <span>{product?.company}&nbsp;</span>
                      <span>qty: {product?.qty_ordered}</span>
                    </div>
            </div>
           
        </div>:<div className={cx("ant-row",styles.rowMoblie)}>
            <div className="ant-col ant-col-xs-24 ant-col-md-8 ant-col-xl-3">
                {product?.items?.map((data:any,idx:number)=>(<Image key ={idx} src={data?.product?.base_image?.path===undefined ?data?.product?.base_image?.large_image_url:s3BucketUrl + data?.product?.base_image?.path}  width="93px"
                      height="93px" style={{flexDirection:"column"}}/>))}
            </div>
            
           
        </div>}
        <div className={styles.rowMoblie}>
          <h3  className={styles.title}>Rate *</h3>
          <Rate
            allowHalf
            className={styles.rateComponent}
            value={star}
            onChange={(e) => setStar(e)}
          />
          <h3 className={styles.title}>Title</h3>
          <Input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className={styles.textArea}
          />
          <h3  className={styles.title}>Review</h3>
          <Input.TextArea
            placeholder="Enter your comment"
            className={styles.textArea}
            rows={6}
            onChange={(e) => setComment(e.target.value)}
            value={comment}
          />
          <div className="py-10" style={{paddingBottom:"6rem"}}>
          <Button type="primary" className="px-3" onClick={addReview}>Submit Feedback</Button>
          </div>
        </div>
      </div>
    </>
  ) : (
    <MyOrdersList />
  );
};

export default AddReview;