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

export default function NgO() {
  const [modalShow, setModalShow] = React.useState(false);
  const [active, setActive] = useState(false);
  const router = useRouter();
  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>
        <div>
          <Container fluid>
            <div className="main-sect">
              <Row className="mt-3">
                <Col lg="4">
                  <button
                    type="button"
                    className="btn btn-primary payment w-50"
                    onClick={() => router.back()}
                  >
                    Go Back
                  </button>
                </Col>
                <Col lg="4"></Col>
              </Row>

              <div className="lief-tab">
                <Tab.Container id="left-tabs-example" defaultActiveKey="1">
                  <Row className="mb-3">
                    <Col lg="12">
                      <div className="mb-lg-4 mb-2 report-tab">
                        <Nav variant="pills" className="d-flex justify-content-center">
                          <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>
                    {/* Photos Tab */}
                    <Tab.Pane eventKey="1">
                      <Row>
                        <div className="home-dashbaord">
                          {compaign?.data?.image?.filter((item: any) => item.mediatype === 'image')
                            ?.length === 0 ? (
                           <Col lg="12">
                                         <div className="noData">
                                           <h3>No Photo Campaign to show</h3>
                                         </div>
                                       </Col>
                          ) : (
                            compaign?.data?.image
                              ?.filter((item: any) => item.mediatype === 'image')
                              .map((data: any, index: any) => (
                                <div className="cardMain" key={index}>
                                  <Image src={data.mediaUrl} className="thumbnail" alt="" />
                                </div>
                              ))
                          )}
                        </div>
                      </Row>
                    </Tab.Pane>

                    {/* Videos Tab */}
                    <Tab.Pane eventKey="2">
                      <Row>
                        {compaign?.data?.image?.filter((item: any) => item.mediatype === 'video')
                          ?.length === 0 ? (
                           <Col lg="12">
                                         <div className="noData">
                                           <h3>No Video Campaign to show</h3>
                                         </div>
                                       </Col>
                        ) : (
                          compaign?.data?.image
                            ?.filter((item: any) => item.mediatype === 'video')
                            .map((data: any, index: any) => (
                              <div
                                key={index}
                                style={{
                                  borderRadius: '22px',
                                  marginTop: '22px',
                                  overflow: 'hidden',
                                  boxShadow: 'rgba(36, 30, 30, 0.2) 0px 2px 8px 0px',
                                  padding: '16px',
                                  backgroundColor: '#fff',
                                  width: 'fit-content',
                                  display: 'inline-block',
                                }}
                              >
                                <ReactPlayer
                                  url={data?.mediaUrl}
                                  width={400}
                                  height={220}
                                  controls={true}
                                />
                              </div>
                            ))
                        )}
                      </Row>
                    </Tab.Pane>
                  </Tab.Content>
                </Tab.Container>
              </div>
            </div>
          </Container>
        </div>
        <Likes show={modalShow} onHide={() => setModalShow(false)} />
      </WebsiteLayout>
    </>
  );
}

// Heart like modal
function Likes(props: any) {
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="likes-modal"
    >
      <Modal.Header closeButton></Modal.Header>
      <Modal.Body>
        <div className="congrats">
          <img src={'/images/congrats.png'} alt="" />
          <h4 className="text-center mb-2">Congratulations</h4>
          <p>It’s a Match</p>
          <div className="likes-btn mt-5">
            <button className="btn btn-primary keep-btn" type="button">
              KEEP SWIPING
            </button>
            <button
              className="btn btn-primary"
              type="button"
              onClick={() => router.push('/Chat')}
            >
              MESSAGE HER
            </button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}