import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import { useGetAllCompaignsByIdQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import React, { useState } from 'react';
import {
  Col,
  Container,
  Nav,
  Row,
  Spinner,
  Tab
} from 'react-bootstrap';
import Modal from 'react-bootstrap/Modal';
import ReactPlayer from 'react-player';

const relief = [
  {
    id: 0,
    icon: '/images/sidbar-icon/cards.svg',
    text: '1234*******3434',
    location: '/images/sidbar-icon/Location-(2).svg',
    pera: 'lorem ipsum',
    call: '/images/sidbar-icon/call.svg',
    phone: '+123 1234567',
    email: '/images/sidbar-icon/sms.svg',
    message: 'info@abcd.com',
  },
];

export default function CompaignDetail() {
  const [modalShow, setModalShow] = React.useState(false);
  const router = useRouter();
  const [modalShowShare, setModalShowShare] = React.useState(false);
  const { data: session }: any = useSession();
  const { id: compaign_id } = router.query;
  const token = session?.user?.token;
  const skip = !token;
  const {
    data: compaign,
    error,
    isLoading,

    refetch,
  } = useGetAllCompaignsByIdQuery(
    { id: compaign_id, token },
    { refetchOnMountOrArgChange: true, skip }
  );

  return (
    <>
      <WebsiteLayout>
        <Container fluid>
          <div className="main-sect">
            {isLoading ? (
              <div className="spinner-container">
                <Spinner animation="border" className="custom-spinner" />
              </div>
            ) : (
              <div className="relief-page">
                <div className="admin-hed">
                  <div className="back-link">
                    <img
                      src={'/images/sidbar-icon/arrow-left.svg'}
                      onClick={() => router.back()}
                      alt=""
                    />
                    <h2 className="heading mb-0"> Back</h2>
                  </div>
                  <button
                    className="btn btn-primary"
                    onClick={() =>
                      router.push(`/organizer/organizer-campaign/edit-campaign?id=${compaign_id}`)
                    }
                  >
                    Edit Campaign
                  </button>
                </div>

                <Row>
                  <div className="banner">
                    <img
                      src={`${compaign?.data?.thumbnail?.thumbnailUrl}`}
                      className="bg-img"
                      alt=""
                    />
                    <div className="share">
                      <img
                        src={'/images/sidbar-icon/share.svg'}
                        onClick={() => setModalShowShare(true)}
                        alt=""
                      />
                    </div>
                  </div>

                  <Col lg={8}>
                    <div className="food">
                      <h4>{compaign?.data?.title}</h4>
                      <button type="button" className="btn btn-primary">
                        Goal: {compaign?.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>

                <Row>
                  <Col lg={9}>
                    <div className="left-relief">
                      <h5 className="mb-2">Description</h5>
                      <p>{compaign?.data?.description}</p>
                    </div>
                  </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 className="row">
                          <Row className="row">
                            <div className="home-dashbaord">
                              {/* {compaign?.data?.image?.map((e: any) => { */}
                              {[...Array(8)].map((e: any) => {
                                return (
                                  e?.mediatype === 'image' && (
                                    //   <Col xl={2} lg={4}>
                                    <div className="pictures">
                                      <img src="/images/cm-detail.png" alt="" />
                                    </div>
                                    //   </Col>
                                  )
                                );
                              })}
                            </div>
                          </Row>
                        </Row>
                      </Tab.Pane>
                      <Tab.Pane eventKey="2">
                        <Row className="row">
                          <div className="home-dashbaord">
                            {compaign?.data?.image?.map((e: any) => {
                              return (
                                e?.mediatype === 'video' && (
                                  //   <Col xl={2} lg={4}>
                                  <div className="videos">
                                    <ReactPlayer
                                      url={e?.mediaUrl}
                                      width={200}
                                      height={171}
                                      controls={true}
                                    />
                                  </div>
                                  //   </Col>
                                )
                              );
                            })}
                          </div>
                        </Row>
                      </Tab.Pane>
                    </Tab.Content>
                  </Tab.Container>
                </div>
                <Share show={modalShowShare} onHide={() => setModalShowShare(false)} />
              </div>
            )}
          </div>
        </Container>
      </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>
  );
}