/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
import Dashboard_Chart from '@/components/Chart/Dashboard_Chart';
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import Link from 'next/link';
import { useRouter } from 'next/router';
import Modal from 'react-bootstrap/Modal';
// import React from "react";
import React, { useState } from 'react';
import { Button, Card, Col, ListGroup, Nav, Row, Tab } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import VideoModal from '@/components/VideoModal/Video-Modal';
import { ChatAccordian } from '@/components/ChatAccordian/ChatAccordian';

const friend = [
  {
    id: 0,
    name: 'Location',
    locations: '/images/locations.png',
    pera: '3271 Chasen Dr Shingle Springs, California(CA), 95682',
  },

  {
    id: 1,
    name: 'Time',
    calendor: '/images/calendor.png',
    pera: 'Monday 03:30 PM (EST)',
  },

  {
    id: 2,
    name: 'Reservation',
    dolar: '/images/dolar.png',
    price: '$45.00',
    pera: 'Per Reservation',
  },

  {
    id: 3,
    name: 'Crowd',
    user: '/images/user.png',
    pera: '10 Peoples are going',
  },
];

// const gather = [

//   {
//     id:0
//   },

//   {
//     id:1
//   },

//   {
//     id:2
//   },

//   {
//     id:3
//   }

// ]

export default function FriendGathering() {
  const [modalShow, setModalShow] = React.useState(false);
  const [modalShow3, setModalShow3] = React.useState(false);
  // const [modalShow5, setModalShow5] = React.useState(false);
  const [modalShowEvnt, setModalEvnt] = React.useState(false);
  const [modalShowRequest, setModalRequest] = React.useState(false);
  const router = useRouter();
  return (
    <>
      <DashboardLayout>
        <div>
          <h2 className="heading">Friends Gathering</h2>
          <div className="event-inner">
            <div className="friend-gather">
              <Image src="/images/friend-banner.png" />
            </div>
            <Row className="mt-4">
              <Col lg="8">
                {/* <h2>reprot</h2> */}
                <div className="sub-gather">
                  {friend.map((data, index) => (
                    <div className="friend-event" key={index}>
                      <h5>{data.name}</h5>
                      <div className="icn-list">
                        <img src={data.locations} alt="" />
                        <img src={data.calendor} alt="" />
                        <img src={data.dolar} alt="" />
                        <img src={data.user} alt="" />
                        <p>
                          <span>{data.price}</span> {data.pera}{' '}
                        </p>
                      </div>
                    </div>
                    // </Col>
                  ))}
                </div>
              </Col>
              <Col lg="4">
                <div className="gatherd text-center">
                  <Link href={''} onClick={() => setModalEvnt(true)}>
                    Report Event
                  </Link>
                </div>
              </Col>
            </Row>
            <div className="disclamer mt-5">
              <h5>Description</h5>
              <p>
                Gorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et
                velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora
                torquent per conubia nostra, per inceptos himenaeos. Curabitur tempus urna at turpis
                condimentum lobortis. Gorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
                vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti
                sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
                tempus urna at turpis condimentum lobortis. Gorem ipsum dolor sit amet, consectetur
                adipiscing elit. Nunc vulputate libero et velit interdum, ac.
              </p>
              <Button type="button" className="rqust-btn" onClick={() => setModalRequest(true)}>
                Request For Reservation
              </Button>
            </div>
          </div>

          {/* <Likes
            show={modalShow3}
            onHide={() => setModalShow3(false)}
          /> */}
        </div>
        {/* <Video
          show={modalShow}
          onHide={() => setModalShow(false)}
        /> */}
        <EventReport show={modalShowEvnt} onHide={() => setModalEvnt(false)} />

        <EventRequest show={modalShowRequest} onHide={() => setModalRequest(false)} />
      </DashboardLayout>
    </>
  );
}

// Event Report Modal

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

      <Modal.Body>
        {chat ? (
          <div className="report">
            <img src={'/images/question-1.png'} alt="" />
            <h4 className="text-center mb-2 mt-4">Reason For Reporting</h4>
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Reason</label>
                <textarea name="" className="form-control" rows={6} placeholder="Bio..."></textarea>
              </div>
            </div>
            <div className="btn-cstm mt-5">
              <Button className="w-100 mt-3 need-btn" type="button">
                No need
              </Button>
              <Button
                className="w-100 mt-3"
                type="button"
                onClick={() => {
                  setChat(!chat);
                }}
              >
                Yes
              </Button>
            </div>
          </div>
        ) : (
          <>
            <div className="report">
              <img src={'/images/check-1.png'} alt="" />
              <h4 className="text-center mb-2 mt-4">Event Reported</h4>
              <p>This event has been reported successfully.</p>
              <Button className="w-100 mt-3 rprt-btn" onClick={() => router.push('/Events')}>
                {' '}
                Go Back
              </Button>
            </div>
          </>
        )}
      </Modal.Body>
    </Modal>
  );
}

// Event Request

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

      <Modal.Body>
        <div className="report">
          <img src={'/images/check-1.png'} alt="" />
          <h4 className="text-center mb-3 mt-4">Request Sent</h4>
          <p>
            You&apos;ll be notified once the request has <br /> been submitted.
          </p>
          <Button className="w-100 mt-3 rprt-btn" onClick={() => router.push('/Events')}>
            {' '}
            Go Back
          </Button>
        </div>
      </Modal.Body>
    </Modal>
  );
}