import React, { useEffect, useState } from "react";
import { Grid, Typography, ListItem } from "@mui/material";
import {
  ChatProductImage,
  ChatProductInfoBox,
  HoverIocns,
  ProductDetailMessageBox,
  ProductInfoDescription,
  ProductInfoSubHeading,
  ProductOrderQuantity,
  SenderMessageDetailInfo,
  SenderMsgBox,
} from "../../../style";
import Link from "next/link";

const LinkPreview = ({ url }) => {
  const [previewData, setPreviewData] = useState<any>({});

  let fetchUrl = `https://api.linkpreview.net/?q=${url}`;

  useEffect(() => {
    const fetchLinkPreviewData = async () => {
      try {
        const response = await fetch(fetchUrl, {
          method: "GET",
          headers: {
            "X-Linkpreview-Api-Key": "47e6eec1be77eac2c3894dc4ebef9dac",
          },
        });
        const data = await response.json();
        // const firstFiveTags = data.tags.slice(0, 5);
        setPreviewData(data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchLinkPreviewData();
  }, []);

  if (!previewData) {
    return <Typography>Loading...</Typography>;
  }

  return (
    <>
      {!previewData?.error ? (
        <ListItem>
          <Grid container>
            <Grid item xs={12}>
              <SenderMessageDetailInfo>
                <HoverIocns className="messagehover"></HoverIocns>
                <SenderMsgBox>
                  <ProductDetailMessageBox>
                    <Grid container spacing={2}>
                      <Grid item xs={3} sm={3} md={3}>
                        <ChatProductImage>
                          <img
                            src={
                              previewData?.image
                                ? previewData?.image
                                : "/assets/chat/link-icon.svg"
                            }
                          />
                        </ChatProductImage>
                      </Grid>
                      <Grid item xs={9} sm={9} md={9}>
                        <ChatProductInfoBox>
                          <ProductInfoSubHeading>
                            {previewData?.title}
                          </ProductInfoSubHeading>
                          <ProductInfoDescription>
                            {previewData?.description}
                          </ProductInfoDescription>
                          <ProductOrderQuantity>
                            <Typography>
                              <Link href={url}>{url}</Link>
                            </Typography>
                          </ProductOrderQuantity>
                        </ChatProductInfoBox>
                      </Grid>
                    </Grid>
                  </ProductDetailMessageBox>
                </SenderMsgBox>
              </SenderMessageDetailInfo>
            </Grid>
          </Grid>
        </ListItem>
      ) : (
        <ProductOrderQuantity>
          <Typography>No Preview Available</Typography>
          <Typography>
            <Link href={url}>{url}</Link>
          </Typography>
        </ProductOrderQuantity>
      )}
    </>
  );
};

export default LinkPreview;