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


export default function Profile() {
  
  const { data: session }: any = useSession();
 const router = useRouter();
  const{id: ID} = router?.query;
  const token = session?.user?.token;

  const skip = !token;
  const {
    data: organization,
    error,
    isLoading,

    refetch,
  } = useGetOtrgaizationByIdQuery({ id: 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="profile-page">
                <Row className="mt-3 justify-content-center">
                  <Col lg="4">
                    {/* <button type="button" className="btn btn-primary payment w-50">
                      Go Back
                    </button> */}
                  </Col>
                  <Col lg="4">
                    <div className="direct-screen-hed">
                      <h2 className="heading">Organization Profile</h2>
                    </div>
                  </Col>
                  <Col lg="4"></Col>
                </Row>
                <Row className="justify-content-center">
                  <span className="profile-image">
                    <img
                      // src={'/images/thumbnail.png'}
                      src={`${organization?.data?.organizationModel?.image?.mediaUrl}`}
                      className="orgnized-pic"
                      alt=""
                    />
                  </span>
                  <div className="history">
                    <div className="sub-head">
                      <h4>Total Donation Recieved</h4>
                      <h5>$100,000.78</h5>
                    </div>
                    <div className="organization-btn"></div>
                  </div>
                  <Col lg={10}>
                    <div className="profile-img">
                      <div className="profile-datail">
                        <div className="profile-names">
                          <p>Full Name</p>
                          <h6>{organization?.data?.organizationModel?.name}</h6>
         
                        </div>
                        <div className="profile-names">
                          <p>Email</p>
                          <h6>{organization?.data?.organizationModel?.email}</h6>
                        </div>
                        <div className="profile-names">
                          <p>Country</p>
                          <h6>{organization?.data?.organizationModel?.location?.slice(0,33)}</h6>
                        </div>
                        <div className="profile-names">
                          <p>Cause</p>
                          <h6>{organization?.data?.organizationModel?.cause}</h6>
                        </div>
                      </div>
                      <div className="profile-datail">
                        <div className="profile-names">
                          <p>Phone Number</p>
                          <h6>{organization?.data?.organizationModel?.phonenumber}</h6>
                        </div>
                        <div className="profile-names">
                          <p>Account Number</p>
                          <h6>{organization?.data?.organizationModel?.accountnumber}</h6>
                        </div>
                        <div className="profile-names">
                          <p>Established</p>
                          <h6>{organization?.data?.organizationModel?.establishedyear}</h6>
                        </div>
                        < div className="profile-names">
                          <p>Website</p>
                          <h6>{organization?.data?.organizationModel?.website}</h6>
          
                        </div>
                      </div>
                      <div className="text-center">
                       
                      </div>

                      <div className="profile-detail mt-4">
                        <h5>Bio</h5>
                        <p>
                         {organization?.data?.organizationModel?.bio}
                        </p>
                        <br />
                        <h5>Goals</h5>
                        <ul>
                          <li>
                           {organization?.data?.organizationModel?.goals}
                          </li>
                          
                          {/* <li>{organization?.data?.organizationModel?.goals}</li> */}
                        </ul>
                        <br />
                        <h5>Objectives</h5>
                        <ul>
                          <li>
                            {' '}
                            {organization?.data?.organizationModel?.objectives}
                          </li>
                        
                        </ul>
                        <br />
                      </div>
                    </div>
                     <h5 className="mb-3">Team Members</h5>
                  <div className="mainmembersdiv">
                    {organization?.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>
                    <h4 className="mb-3 mt-3">Threads</h4>
                  </Col>
                  <div className="social-feed">
                  <Row className="justify-content-center">
                    <Col lg={6}>
                      {/* <h2 className="heading">Home</h2> */}
                      <div className="comment-page">
                        <div className="hed-search">{/* <h2 className="heading">Back</h2> */}</div>

                        {organization?.data?.posts?.map((data: any, index: number) => (
                          <>
                            <Card key={index} className="mt-4">
                              <Card.Body>
                                <div className="feed-box">
                                  {data?.threadType === 'poll' ? (
                                    <PollDisplay
                                      pollTitle={data?.pollid?.title}
                                      pollOptions={data?.pollid?.options}
                                      poll={data?.responseOfPoll}
                                      pollId={data?.pollid?._id}
                                    />
                                  ) : data?.threadType === 'discussion' ? (
                                    <div>
                                      <h5>{data?.discussionid?.title}</h5>
                                    </div>
                                  ) : (
                                    <>
                                      <h5>{data.description}</h5>
                                      {data.media?.mediaUrl ? (
                                        <img
                                          src={`${data.media?.mediaUrl}`}
                                          className="photo"
                                          alt=""
                                          height={400}
                                        />
                                      ) : (
                                        ''
                                      )}
                                    </>
                                  )}
                                  
                                </div>
                              </Card.Body>
                            </Card>
                           
                          </>
                        ))}
                        
                      </div>
                    </Col>
                  </Row>

                 

                 
                </div>
                </Row>
              </div>
            )}
          </div>
        </Container>
      </WebsiteLayout>
    </>
  );
}