"use client";
import { useRef } from "react";
import {
  Client2ConsumerTableConfig,
  Client2ProducerTableConfig,
} from "@/config/client_2";
import CustomTable from "@/components/table";
import useGetEntityByName from "@/components/hooks/useGetEntityById";
import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
import CopyToClipboard from "@/components/copy_to_clipboard";
import { useGetEntity } from "@/api/entities/entities";
import { useGetConsumer } from "@/api/consumers/consumers";
import { mutate } from "swr";
import axios from "axios";
import { BASE_URL } from "@/constants";

export default function Client2() {

  const { entity } = useGetEntityByName('C2');
  const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
  const { data: consumerData, isLoading: loadingConsumerData, swrKey: consumerKeyFunc } = useGetConsumer({ entity_did: entity?.did })
  const cardContentRef = useRef(null);

  const onAttachEntity = async () => {
    try {
      const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
      alert(response.data.message);
    } catch (error) {
      console.error(error);
    } finally {
    }
  }

  const onDetachEntity = async () => {
    try {
      const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
      console.log('detach', response)
      alert('Entity Detached Successfully.');
    } catch (error) {
      console.error(error);
    } finally {
    }
  }

  const onRefresh = () => {
    const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
    const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
    if (entityKey) mutate(entityKey);
    if (consumerKey) mutate(consumerKey)
  }

  if (isLoading)
    return <Skeleton height={500} />

  return (
    <div className="m-10">
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <h2>Client 2</h2>
        <div>
          <Button onClick={onAttachEntity} className="mr-6" variant="contained">
            Attach
          </Button>
          <Button onClick={onDetachEntity} className="mr-6" variant="contained">
            Detach
          </Button>
          <Button onClick={onRefresh} variant="contained">Refresh</Button>
        </div>
      </div>

      <Card variant="outlined">
        <CardHeader
          subheader="Summary"
          action={<CopyToClipboard contentRef={cardContentRef} />}
        />
        <CardContent ref={cardContentRef}>
          <Typography color="text.primary" gutterBottom>
            DID: <code>{client2?.data?.did}</code>
          </Typography>
          <Typography color="text.primary" gutterBottom>
            IP: <code>{client2?.data?.ip}</code>
          </Typography>
          <Typography color="text.primary" gutterBottom>
            Network: <code>{client2?.data?.other?.network}</code>
          </Typography>
        </CardContent>
      </Card>
      <div>
        <h4>Consumer View</h4>
        <CustomTable
          loading={loadingConsumerData}
          data={consumerData?.data}
          configuration={Client2ConsumerTableConfig}
        />
      </div>
      <div>
        <h4>Producer View</h4>
        <CustomTable
          loading={isLoading}
          data={client2?.data?.producers}
          configuration={Client2ProducerTableConfig}
        />
      </div>
    </div>
  );
}