/* 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 { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import Select from 'react-select';
import { Button, Card, Col, ListGroup, Dropdown, Nav, Row, Tab, Spinner } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';
import FileUpload from '@/components/UploadFiles/FileUpload';
import ProfilePictureUpload from '@/components/Form/ProfilePictureUpload';
import Dropzone from 'react-dropzone';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import { useGetOtrgaizationByIdQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';

const profils = [
  {
    id: 0,
    src: '/images/picss.png',
    name: 'Art 01',
  },
  {
    id: 1,
    src: '/images/picss.png',
    name: 'Art 01',
  },
  {
    id: 2,
    src: '/images/picss.png',
    name: 'Art 01',
  },
];

const ProfilePics = [
  {
    id: 0,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 1,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 2,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 3,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 4,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 5,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 6,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 7,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
  {
    id: 8,
    url: '/images/sidbar-icon/pro-img.png',
    title: 'Divid Muller',
  },
];

export default function OrganizationProfile() {
  const Router = useRouter();
  const { data: session }: any = useSession();
  const { id: organizor_id } = Router.query;
  const token = session?.user?.token;
  const skip = !token;
  const {
    data: Organizer,
    error,
    isLoading,

    refetch,
  } = useGetOtrgaizationByIdQuery(
    { id: organizor_id, token },
    { refetchOnMountOrArgChange: true, skip }
  );
  const router = useRouter();
  return (
    <>
      <DashboardLayout>
        <div className="profile-page">
          <div className="back-link">
            <img src={'/images/sidbar-icon/arrow-left.svg'} onClick={() => router.back()} alt="" />
            <h4 className="heading text-dark pb-3 mb-0">Back</h4>
          </div>
          <h2 className="heading">Organization Profile</h2>
          {isLoading ? (
            <div className="spinner-container">
              <Spinner animation="border" className="custom-spinner" />
            </div>
          ) : (
            <Row>
              <Col lg={8}>
                <div className="profile-img">
                  <img src={Organizer?.data?.organizationModel?.image?.mediaUrl} alt="" />
                  <div className="history">
                    <div className="sub-head">
                      <h4>Total Donation Received</h4>
                      <h5>$100,000.78</h5>
                    </div>
                  </div>
                  <div className="profile-datail">
                    <div className="profile-names">
                      <p>Full Name</p>
                      <h6>{Organizer?.data?.organizationModel?.name}</h6>
                    </div>
                    <div className="profile-names">
                      <p>Email</p>
                      <h6>{Organizer?.data?.organizationModel?.email}</h6>
                    </div>
                    <div className="profile-names">
                      <p>Location</p>
                      <h6>{Organizer?.data?.organizationModel?.location}</h6>
                    </div>
                    <div className="profile-names">
                      <p>Cause</p>
                      <h6>{Organizer?.data?.organizationModel?.cause}</h6>
                    </div>
                  </div>
                  <div className="profile-datail">
                    <div className="profile-names">
                      <p>Phone Number</p>
                      <h6>{Organizer?.data?.organizationModel?.phonenumber}</h6>
                    </div>
                    <div className="profile-names">
                      <p>Account Number</p>
                      <h6>{Organizer?.data?.organizationModel?.accountnumber}</h6>
                    </div>
                    <div className="profile-names">
                      <p>Established</p>
                      <h6>{Organizer?.data?.organizationModel?.establishedyear}</h6>
                    </div>
                    <div className="profile-names">
                      <p>Website</p>
                      <h6>{Organizer?.data?.organizationModel?.website}</h6>
                    </div>
                  </div>

                  <h4 className="mb-2">Bio</h4>
                  <p>{Organizer?.data?.organizationModel?.bio}</p>
                  <h4 className="mb-2 mt-4">Goals</h4>
                  <p>{Organizer?.data?.organizationModel?.goals}</p>
                  <h4 className="mb-2 mt-4">Objectives</h4>
                  <p>{Organizer?.data?.organizationModel?.objectives}</p>
                </div>
              </Col>

              <h5 className="mb-3">Team Members</h5>
              <div className="mainmembersdiv">
                {Organizer?.data?.organizationModel?.membersid?.map((e: any, index: number) => {
                  return (
                    <div key={index} className="imagediv">
                      <span className="image">
                        <img src={`${e?.image?.mediaUrl}`} alt="" width={120} height={120} />
                      </span>
                      <span className="membername">
                        <h5>{e?.name}</h5>
                      </span>
                    </div>
                  );
                })}
              </div>
            </Row>
          )}
        </div>
      </DashboardLayout>
    </>
  );
}