/* eslint-disable @next/next/no-img-element */
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import { useGetOtrgaizationByIdQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { Col, Container, Row, Spinner } from 'react-bootstrap';


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 (
    <>
      <WebsiteLayout>
         <Container fluid>
  <div className="profile-page" >
          <div className="back-link" style={{
            paddingInline : "55px",
            width : "350px"
          }}>
           <button type="button" className="btn btn-primary payment w-100" onClick={() => router?.back()}>
                    Go Back
                  </button>
          </div>
   
          {isLoading ? (
            <div className="spinner-container">
              <Spinner animation="border" className="custom-spinner" />
            </div>
          ) : (
            <Row>
              <Col lg={12}>
                     
                <div className="profile-img">
                  <div style={{
                    display : "flex",
                    flexDirection: "column",
                    alignItems : "center"
                  }}>

            
                  <h2 className="heading">Organization Profile</h2>
                  <img src={Organizer?.data?.organizationModel?.image?.mediaUrl} alt="" style={{
                    width : "150px",
                    height: "150px",
                    borderRadius: "50%"
                  }} />
                        </div>
                  <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>
<div style={{

  paddingInline : "350px"
}}>


                  <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>
                </div>
              </Col>
<div style={{

  paddingInline : "350px"
}}>

  <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>
</div>
            
            </Row>
          )}
        </div>
         </Container>
      
      </WebsiteLayout>
    </>
  );
}