import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import {
  useGetCommunityByIdQuery,
  useGetCommunityQuery,
} from "../../Services/api.service";
import {
  Box,
  Button,
  Divider,
  Image,
  StackDivider,
  Tag,
  VStack,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import Header from "../../Components/Header";

const ComunityViewPage = () => {
  const { id } = useParams();
  const { data, error, isLoading } = useGetCommunityByIdQuery(id);
  const member = data?.data;
  return isLoading ? (
    <FullscreenLoaders />
  ) : (
    <Box
      {...OPACITY_ON_LOAD}
      w={"100%"}
      h={"100vh"}
      overflowY={"scroll"}
      display={"flex"}
      flexDirection={"column"}
    >

      
    <Header 
    title={"Community"}
    btnTitle={"Edit community"}
    link={`/community/edit/${id}`}
    />

      <Box display={'flex'}>

      <Box className="col-5   d-flex flex-column gap-2 pt-4">
        <span className="web-text-large fw-bold rubix-text-dark">
          Members Info
        </span>
        <span className="web-text-medium text-secondary">
          Select the platform for which you need to create this campaign.
        </span>

        <Divider />

        <span className="web-text-large fw-bold rubix-text-dark">
          Display profile
        </span>
        <span className="web-text-medium text-secondary mb-4">
          Below is the profile that will be displayed on the community page.
        </span>

        <Box
          boxSize="sm"
          className="d-flex h-75  w-100 justify-content-start flex-column align-items-center gap-3"
        >
          <Image
            shadow={"md"}
            rounded={8}
            w={214}
            h={240}
            src={`https://rubix.betadelivery.com/${member?.profile_image}`}
            alt="Selected Image"
          />
          {/* <Button
          onClick={() => setSelectedImage(fallbackImage)}
          backgroundColor="red.400"
          color={"whitesmoke"}
          transition={"0.5s"}
          _hover={{
            backgroundColor: "red.500",
          }}
          size="xs"
        >
          Remove
        </Button> */}
        </Box>
      </Box>

      <Box className="col-7 pt-4 overflow-auto p-4">
        {data?.data?.status ? (
          <Tag
            position={"absolute"}
            right={10}
            size={"sm"}
            variant="solid"
            colorScheme="teal"
          >
            Active
          </Tag>
        ) : (
          <Tag
            position={"absolute"}
            right={10}
            size={"sm"}
            variant="solid"
            colorScheme="red"
          >
            Inactive
          </Tag>
        )}
        <Box isRequired className="mb-3">
          <Box className="web-text-large fw-bold rubix-text-dark">Name</Box>
          <Box className="web-text-medium text-secondary">
            {member?.member_name}
          </Box>
        </Box>

        <Box isRequired className="mb-3">
          <Box className="web-text-large fw-bold rubix-text-dark">
            Designation
          </Box>
          <Box className="web-text-medium text-secondary">
            {member?.designation}
          </Box>
        </Box>

        <Box isRequired className="mb-3">
          <Box className="web-text-large fw-bold rubix-text-dark">
            Description
          </Box>
          <Box className="web-text-medium text-secondary">
            {member?.description}
          </Box>
        </Box>

        <Box isRequired className="mb-3">
          <Box className="web-text-large fw-bold rubix-text-dark">Linkedin</Box>
          <Box className="web-text-medium text-secondary">
            {member?.linkedin}
          </Box>
        </Box>

        <Box isRequired className="mb-3">
          <Box className="web-text-large fw-bold rubix-text-dark">
            Created At
          </Box>
          <Box className="web-text-medium text-secondary">
            {formatDate(member?.createdAt)}
          </Box>
        </Box>

        <Box isRequired className="mb-3">
          <Box className="web-text-large fw-bold rubix-text-dark">
            Updated At
          </Box>
          <Box className="web-text-medium text-secondary">
            {formatDate(member?.updatedAt)}
          </Box>
        </Box>


        <Divider />
      </Box>
      </Box>
    </Box>
  );
};

export default ComunityViewPage;