import { Table } from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
import dayjs from 'dayjs';

export const ContactUsleads = () => {
  const [contactLeads, setContactLeads] = useState([]);
  useEffect(() => {
    axios
      .get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/contact-uses`)
      .then(res => {
        let contactLeadsData =
          res.data &&
          res.data.data.map(data => {
            return {
              key: data.id,
              name: data?.attributes?.name,
              email: data?.attributes?.email,
              number: data?.attributes?.number,
              zip: data?.attributes?.zip,
              message: data?.attributes?.message,
              publishedAt: data?.attributes?.publishedAt
            };
          });
        console.log("contactLeadsData :", contactLeadsData);
        setContactLeads(contactLeadsData);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);
  const transformDateTime = rawDate => {
    const date = new Date(rawDate);

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
    const day = String(date.getDate()).padStart(2, "0");

    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      width: 300,
      render: text => <a>{text}</a>
    },
    {
      title: "Email",
      dataIndex: "email",
      key: "email",
      width: 300,
      render: text => <a>{text}</a>
    },
    {
      title: "Zip",
      dataIndex: "zip",
      key: "zip",
      width: 100,
      render: text => <a>{text}</a>
    },
    {
      title: "Message",
      dataIndex: "message",
      key: "message",
      render: text => <a>{text}</a>
    },
    {
      title: "Date & Time",
      dataIndex: "publishedAt",
      key: "publishedAt",
      width: 200,
      render: text => <a>{transformDateTime(text)}</a>,
    //   sorter: (a, b) => a.publishedAt - b.publishedAt,
      sorter: (a, b) => dayjs(a.publishedAt).unix() - dayjs(b.publishedAt).unix(),
      sortDirections: ["descend", "ascend"],
      
    }
  ];
  return (
    <div className="p-5 h-100">
      <Table columns={columns} dataSource={contactLeads} />
    </div>
  );
};