/* eslint-disable @next/next/no-img-element */
// import Dashboard_Chart from "@/components/Chart/Dashboard_Chart";
import React, { useEffect, useState } from 'react';
import { Button, Col, Container, Nav, Row, Spinner, Tab } from 'react-bootstrap';
// import TimeTable from "@/components/Table/TimeTable";
// import ProfilePictureUpload from "@/components/Form/ProfilePictureUpload";
// import Password from "@/components/Form/Password";
import { AddCalendar } from '@/components/AddCalendar/AddCalendar';
import RadialChart from '@/components/Chart/CircuilChart';
import { Imagesslides } from '@/components/Imageslides/images-slide';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import {
  useCreatePaymentIntentMutation,
  useGetAllCompaignsByIdQuery,
} from '@/lib/redux/services/Organizorflow/Dashboard.api';
import {
  useCreateFavouriteCampaignsMutation,
  useGetUserbagdesQuery,
  usePostReviewMutation,
  useRemoveFavouriteCampaignsMutation,
} from '@/lib/redux/services/Userflow/UserDashboard.api';
import { loadStripe } from '@stripe/stripe-js';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import Modal from 'react-bootstrap/Modal';
import toast from 'react-hot-toast';
import Select from 'react-select';
import { Elements } from '@stripe/react-stripe-js';
import PaymentForm from '@/components/PaymentForm/PaymentForm';
import { useCreateGuestPaymentIntentMutation, useGetGuestCampaignByIdQuery } from '@/lib/redux/services/auth.api';

export default function UserCompaignDetail() {
  const router = useRouter();
  const [modalShowShare, setModalShowShare] = React.useState(false);
  const [modalShowOneTimeDonation, setModalShowOneTimeDonation] = React.useState(false);
  const [favourite, setFavourite] = useState<any>(null);
  const [type, setType] = useState<string>(`user`);
  const [organId, setOrganId] = useState('');
  const [organCause, setOrgancause] = useState('');
  const [AddCardModal, setAddCardModal] = useState(false);
  const { data: session }: any = useSession();
  const { id: compaign_id } = router.query;
  const token = session?.user?.token;
  const skip = !token;
 

  const favArr = session?.user?.favoriteCampaignId;

  const [Favourite, { isLoading: FavouriteLoading }] = useCreateFavouriteCampaignsMutation();
  const [RemoveFavourite, { isLoading: RemovefavouriteLoading }] =
    useRemoveFavouriteCampaignsMutation();
  const {
    data: compaign,
    error,
    isLoading,

    refetch,
  } = useGetGuestCampaignByIdQuery(
    { id: compaign_id, token },
    { refetchOnMountOrArgChange: true, skip }
  );
  const handleMakeFavourite = async (data: any) => {
    FavouriteLoading === true;
    try {
      const response: any = await Favourite({
        body: {
          campaignId: compaign_id,
        },
        token,
      }).unwrap();
      if (response?.status) {
        toast.success('Campaign Added to Favourites');
        refetch();
        session.user.favoriteCampaignId.push(compaign_id);
        setFavourite(true);
        FavouriteLoading === false;
      }
    } catch (err: any) {
      console.error(err);
      toast.error(err?.data?.message);
    }
  };

  const handleRemoveFavourite = async (data: any) => {
    RemovefavouriteLoading === true;
    try {
      const response: any = await RemoveFavourite({
        body: {
          campaignId: compaign_id,
        },
        token,
      }).unwrap();
      if (response?.status) {
        toast.success('Campaign removed from Favourites');
        refetch();
        session.user.favoriteCampaignId = session.user.favoriteCampaignId.filter(
          (id: any) => id !== compaign_id
        );
        setFavourite(false);
        RemovefavouriteLoading === false;
      }
    } catch (err: any) {
      console.error(err);
      toast.error(err?.data?.message);
    }
  };

  useEffect(() => {
    if (favArr?.includes(compaign_id)) {
      setFavourite(true);
    }
  }, []);

  const fullText = compaign?.data?.description;
  const [isExpanded, setIsExpanded] = useState(false);
  const characterLimit = 30; // You can change this limit as needed

  const toggleReadMore = () => {
    setIsExpanded((prev) => !prev);
  };

  const displayedText = isExpanded ? fullText : fullText?.slice(0, characterLimit);

  return (
    <>
      <WebsiteLayout>
        <section>
          <Container fluid>
            <div className="main-sect">
              {isLoading ? (
                <div className="spinner-container">
                  <Spinner animation="border" className="custom-spinner" />
                </div>
              ) : (
                <div className="relief-page">
                  <Row className="align-items-start">
                    <Col lg={6}>
                      <Row>
                        {type === `user` ? (
                          <>
                            <div className="banner">
                              <img
                                src={compaign?.data?.thumbnail?.thumbnailUrl}
                                className="bg-img"
                                alt=""
                              />
                            </div>{' '}
                          </>
                        ) : type === 'admin' || type === 'organizer' ? (
                          <>
                            <div className="banner">
                              <Imagesslides />
                              <div className="share">
                                <img
                                  src={'/images/sidbar-icon/share.svg'}
                                  onClick={() => setModalShowShare(true)}
                                  alt=""
                                />
                                <img src={'/images/sidbar-icon/heart.svg'} alt="" />
                              </div>
                            </div>
                          </>
                        ) : type === 'guest' ? (
                          <>
                            <div className="banner">
                              <Imagesslides />
                              <div className="share">
                                <img
                                  src={'/images/sidbar-icon/share.svg'}
                                  onClick={() => setModalShowShare(true)}
                                  alt=""
                                />
                                <img src={'/images/sidbar-icon/heart.svg'} alt="" />
                              </div>
                            </div>
                          </>
                        ) : (
                          <></>
                        )}

                        {/* <Col lg={8}>
                        <div className="food">
                          <h4>{compaign?.data?.title}</h4>
                          <button type="button" className="btn btn-primary">
                            Goal: {c
                            ompaign?.data?.goal}
                          </button>
                          <div className="food-text">
                            <div className="food-info">
                              <img src="/images/sidbar-icon/cards.svg" alt="" />
                              <h6>{compaign?.data?.accountnumber}</h6>
                              <img src="/images/sidbar-icon/Location-(2).svg" alt="" />
                              <h6>{compaign?.data?.address}</h6>
                              <img src="/images/sidbar-icon/call.svg" alt="" />
                              <h6>{compaign?.data?.phonenumber}</h6>
                              <img src="/images/sidbar-icon/sms.svg" alt="" />
                              <h6>{compaign?.data?.email}</h6>
                            </div>
                          </div>
                        </div>
                      </Col> */}
                      </Row>
                    </Col>
                    <Col lg={6}>
                      <div className="food">
                        {/* <h4 className="heading">{compaign?.data?.title}</h4> */}
                        <div className="food-right">
                          <h3 className="heading">{compaign?.data?.title}</h3>
                          {/* <div className="share">
                            <img
                              src={'/images/sidbar-icon/share.svg'}
                              onClick={() => setModalShowShare(true)}
                              alt=""
                            />
                            <img
                              src={
                                favourite
                                  ? '/images/sidbar-icon/unheart.svg'
                                  : '/images/sidbar-icon/heart.svg'
                              }
                              alt=""
                              onClick={favourite ? handleRemoveFavourite : handleMakeFavourite}
                            />
                          </div> */}
                        </div>
                        <div
                          className="left-relief"
                          style={{
                            cursor: 'pointer',
                          }}
                        >
                          <div
                            className="profile-avatar"
                            // onClick={() =>
                            //   router.push(
                            //     `/user/dashboard/organization-profile?id=${compaign?.data?.organizationId?._id}`
                            //   )
                            // }
                          >
                            <img
                              src={compaign?.data?.organizationId?.image?.mediaUrl}
                              alt=""
                              style={{
                                width: '60px',
                                height: '60px',
                                borderRadius: '50%',
                              }}
                            />
                            <span>
                              <h4>{compaign?.data?.organizationId?.name}</h4>
                              {/* <h4>{compaign?.data?.organizationId?.name}</h4> */}
                              <p>Organizer Profile </p>
                            </span>
                          </div>

                          <div className="food-text">
                            <div className="food-info">
                              <h6>
                                <img src="/images/sidbar-icon/cards.svg" alt="" /> 1234*******3434
                              </h6>

                              <h6>
                                <img src="/images/sidbar-icon/Location-(2).svg" alt="" />
                                {compaign?.data?.address}
                              </h6>

                              <h6>
                                <img src="/images/sidbar-icon/call.svg" alt="" />{' '}
                                {compaign?.data?.phonenumber}
                              </h6>

                              <h6>
                                {' '}
                                <img src="/images/sidbar-icon/sms.svg" alt="" />{' '}
                                {compaign?.data?.email}{' '}
                              </h6>
                              {/* <h6>{compaign?.data?.email}</h6> */}
                            </div>
                            <div className="count-chart">
                              <RadialChart />
                            </div>
                          </div>
                        </div>
                        <h5 className="mb-2">Description</h5>
                        <div className="describe mb-4">
                          <div style={{ width: '400px' }}>
                            <p style={{ wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}>
                              {displayedText}
                              {!isExpanded && fullText?.length > characterLimit && '...'}
                            </p>
                            {fullText?.length > characterLimit && (
                              <button
                                onClick={toggleReadMore}
                                style={{
                                  color: '#008a9c',
                                  border: 'none',
                                  background: 'transparent',
                                  cursor: 'pointer',
                                  padding: 0,
                                }}
                              >
                                {isExpanded ? 'Read less' : 'Read more'}
                              </button>
                            )}
                          </div>
                          <div className="btn-cstm">
                            <button
                              type="button"
                              className="btn btn-primary w-100"
                              onClick={() => {
                                setModalShowOneTimeDonation(true);
                                setOrganId(compaign?.data?.organizationId?._id);
                                setOrgancause(compaign?.data?.organizationId?.cause);
                              }}
                            >
                              Donate Now
                            </button>
                          </div>
                        </div>

                        {/* <button type="button" className="btn btn-primary">
                          Goal: {compaign?.data?.goal}
                        </button> */}

                        <div className="add-btns">
                          <button
                            className="btn btn-primary payment w-25"
                            onClick={() => router.back()}
                          >
                            Go Back
                          </button>
                        </div>
                      </div>
                    </Col>
                  </Row>

                  {/* <Row>
                    <Col lg={6}>
                      <Row>
                        <Col lg={9}></Col>
                      </Row>
                    </Col>
                  </Row>

                  <div className="lief-tab">
                    <Tab.Container id="left-tabs-example" defaultActiveKey="1">
                      <Row className="mb-3">
                        <Col lg="8">
                          <div className="mb-lg-4 mb-2 report-tab">
                            <Nav variant="pills" className="d-flex">
                              <Nav.Item className="me-2">
                                <Nav.Link eventKey="1">Photos</Nav.Link>
                              </Nav.Item>
                              <Nav.Item>
                                <Nav.Link eventKey="2">Videos</Nav.Link>
                              </Nav.Item>
                            </Nav>
                          </div>
                        </Col>
                      </Row>
                      <Tab.Content>
                        <Tab.Pane eventKey="1">
                          <Row>
                            <div className="home-dashbaord">
                              <div className="home-dashbaord">
                                {compaign?.data?.image?.map((e: any) => {
                                  return (
                                    e?.mediatype === 'image' && (
                                      //   <Col xl={2} lg={4}>
                                      <div className="pictures">
                                        <img src={e?.mediaUrl} alt="" />
                                      </div>
                                      //   </Col>
                                    )
                                  );
                                })}
                              </div>
                            </div>
                          </Row>
                        </Tab.Pane>
                        <Tab.Pane eventKey="2">
                          <Row>
                            <div className="home-dashbaord">
                              {compaign?.data?.image?.map((e: any) => {
                                return (
                                  e?.mediatype === 'video' && (
                                    <div className="videos">
                                      <ReactPlayer
                                        url={e?.mediaUrl}
                                        width={200}
                                        height={171}
                                        controls={true}
                                      />
                                    </div>
                                  )
                                );
                              })}
                            </div>
                          </Row>
                        </Tab.Pane>
                      </Tab.Content>
                    </Tab.Container>
                  </div> */}
                  <Share show={modalShowShare} onHide={() => setModalShowShare(false)} />
                  <OneTimeDonation
                    show={modalShowOneTimeDonation}
                    onHide={() => setModalShowOneTimeDonation(false)}
                    organ_id={organId}
                    organCause={organCause}
                  />
                </div>
              )}
            </div>
          </Container>
        </section>
      </WebsiteLayout>
    </>
  );
}

function Share(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="block-modal">
          {/* <img src={"/images/question-1.png"} alt="" /> */}
          <h4 className="text-center mb-2 mt-4">Share</h4>
          {/* <ChatAccordian /> */}
          <div className="btn-cstm mt-5">
            <img src={'/images/sidbar-icon/1fb.png'} alt="" />
            <img src={'/images/sidbar-icon/2wt.png'} alt="" />
            <img src={'/images/sidbar-icon/3ml.png'} alt="" />
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}

// It's Modal time

// ontime donation modal

const options_1 = [
  { value: 'weekly', label: 'Weekly' },
  { value: 'monthly', label: 'Monthly' },
  { value: 'quarterly', label: 'Quarterly' },
  { value: 'yearly', label: 'Yearly' },
];

const customStyles = {
  control: (provided: any) => ({
    ...provided,
    borderRadius: '50px',
    background: '#FFF',
    padding: '10px 16px 10px 16px',
    border: '1px solid #1C1C1C',
    boxShadow: '6px 8px 24px 0px rgba(115, 115, 115, 0.16)',
    // fontSize: "16px", // Adjust the font size as needed
    '@media (max-width: 768px)': {
      width: '100%',
      marginLeft: '0',
      fontSize: '16px', // Adjust the font size for smaller screens
    },
  }),

  indicatorSeparator: () => ({ display: 'none' }),
};

function OneTimeDonation({ props, onHide, show, organ_id, organCause }: any) {
  const [selectedOption_5, setSelectedOption_5] = useState<any>(null);
  const [selectedOption_1, setSelectedOption_1] = useState<any>(null);
  const [transactionId, setTransactionId] = useState('');
  const [modalShowConfirmCongrats, setModalShowConfirmCongrats] = React.useState(false);
  const [amount, setAmount] = useState<any>();
  const [AddCard, setAddCard] = useState(false);
  const [tax, setTax] = useState<any>();
  const [recurringdate, setRecurringDate] = useState('');
  const [totalAmount, setTotalAmount] = useState<any>();
  const [client_secret, setClient_Secret] = useState('');
  const [modalShowPaymentCard, setModalShowPaymentCard] = React.useState(false);
  const [modalShowCalenderModal, setModalShowCalenderModal] = React.useState(false);
  const [type, setType] = useState<any>();
  const [chat, setChat] = useState(true);
  const router: any = useRouter();
  const { data: session }: any = useSession();
  const { id: compaign_id } = router.query;
  const token = session?.user?.token;
  const [paymentIntent, { isLoading: paymentLoading }] = useCreateGuestPaymentIntentMutation();
  const calculateStripeFee = () => {
    if (!amount || isNaN(amount)) {
      setTax(0);
      setTotalAmount(0);
      return;
    }
    const amt = parseFloat(amount || 0);
    const stripeFee = +(amt * 0.029 + 0.3).toFixed(2); // Convert to number
    const platformFee = +(amt * 0.15).toFixed(2); // Convert to number

    const totalTax = +(stripeFee + platformFee).toFixed(2);
    const total = +(amt + totalTax).toFixed(2);

    setTax(totalTax);
    setTotalAmount(total);
  };
  const handlePaymnet = async () => {
    try {
      const response = await paymentIntent({
        body: {
          amount: amount,
          organizationId: organ_id,
          campaignId: compaign_id,
          type: type,
        },
        token,
      }).unwrap();
      if (response) {
        setClient_Secret(response?.clientSecret);
        setTransactionId(response?.transactionId);
        setAddCard(true);
      }
    } catch (error: any) {
      toast?.error(error?.data?.error);
    }
  };

  const handlePaymnettwo = async () => {
    try {
      const response = await paymentIntent({
        body: {
          amount: amount,
          organizationId: organ_id,
          campaignId: compaign_id,
          type: type,
          endDate: recurringdate,
          recurringFrequency: selectedOption_1?.value,
        },
        token,
      }).unwrap();
      if (response) {
        setClient_Secret(response?.clientSecret);
        setAddCard(true);
      }
    } catch (error: any) {
      toast?.error(error?.data?.error);
    }
  };

  const handlePaymentSuccess = () => {
    setAddCard(false);
    setModalShowConfirmCongrats(true);
  };

  useEffect(() => {
    calculateStripeFee();
  }, [amount]);

  const stripePromise = loadStripe(`${process.env.NEXT_PUBLIC_STRIPE_PUB_KEY}`);

  return (
    <>
      <Modal
        show={show}
        onHide={onHide}
        {...props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        className="affilaite-modal"
      >
        <Modal.Header closeButton></Modal.Header>

        <Modal.Body>
          <div className="report">
            <Row>
              {AddCard ? (
                <>
                  <h2>Enter Card Details</h2>
                  <Elements stripe={stripePromise}>
                    <PaymentForm
                      onHide={onHide}
                      client_secret={client_secret}
                      eventPrice={amount}
                      onSuccess={handlePaymentSuccess}
                    />
                  </Elements>
                </>
              ) : (
                <Col lg={12}>
                  <div className="time-donation">
                    <Tab.Container id="left-tabs-example" defaultActiveKey="1">
                    
                      <Tab.Content>
                        <Tab.Pane eventKey="1">
                          <Row>
                            <Col lg={12}>
                              <div className="help-feedback">
                                <h4 className="mt-3 mb-3 text-dark">Enter Amount($)</h4>
                                <div className="donat-amount">
                                  <div className="form-group">
                                    <input
                                      type="number"
                                      placeholder="Enter Amount Here"
                                      className="form-control"
                                      value={amount}
                                      onChange={(e: any) => setAmount(e?.target?.value)}
                                    />
                                  </div>
                                </div>
                              </div>
                              <h4>Purpose</h4>
                              <div className="slct-pymnt">
                                <div className="check-1">
                                  <div className="form-group">
                                    <label htmlFor="flood">{organCause}</label>
                                  </div>
                                </div>
                                <div
                                  style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    marginTop: '12px',
                                    marginBottom: '12px',
                                  }}
                                >
                                  <div
                                    className="price"
                                    style={{
                                      display: 'flex',
                                      justifyContent: 'space-between',
                                    }}
                                  >
                                    <h6>price</h6>
                                    <h5>$ {amount ? amount : '00'}</h5>
                                  </div>
                                  <div
                                    className="price"
                                    style={{ display: 'flex', justifyContent: 'space-between' }}
                                  >
                                    <h6>Tax</h6>
                                    <h5>$ {tax ? tax : '0.00'}</h5>
                                  </div>
                                  <div
                                    className="price"
                                    style={{ display: 'flex', justifyContent: 'space-between' }}
                                  >
                                    <h6>SubTotal</h6>
                                    <h5>$ {totalAmount ? totalAmount : '0.00'}</h5>
                                  </div>
                                </div>

                                <div className="text-center">
                                  <button
                                    className="btn btn-primary mt-3 w-50"
                                    type="button"
                                    onClick={handlePaymnet}
                                  >
                                    {paymentLoading ? <Spinner size="sm" /> : 'Donate Now'}
                                  </button>
                                </div>
                              </div>
                            </Col>
                          </Row>
                        </Tab.Pane>
                    
                      </Tab.Content>
                    </Tab.Container>
                  </div>
                </Col>
              )}
            </Row>
          </div>
        </Modal.Body>
      </Modal>
     
    </>
  );
}