"use client";

import Navbar from "@comp/Navbar/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect } from "react";
import SideBarProfile from "../component/SideBarProfile/page";
import AppContext from "@ctx/AppContext";
import BottomSheetDeleteAddress from "plugins/bottomSheet/BottomSheetDeleteAddress";

const page = () => {
  const CTX = useContext(AppContext);
  const addressData = CTX.state.addressData;

  console.log(addressData);

  useEffect(() => {
    if (addressData.length <= 0) {
      CTX.fetchAddressUser();
    }
  }, []);

  return (
    <>
      <Navbar theme={1} />
      <div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5  rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
        <SideBarProfile />

        <div className="lg:col-span-3 xl:col-span-4 ">
          <div className="bg-gray-100 p-5 mt-5 rounded-lg overflow-hidden">
            <div className="flex justify-between">
              <p className="mb-0 font-bold">آدرس های شما</p>
              <button
                className="btn btn-primary text-sm rounded-lg py-1"
                onClick={() => CTX.setBottomSheetAddressOpen(true)}
              >
                {" "}
                افزودن آدرس
              </button>
            </div>

            {addressData.length > 0 ? (
              <div className="overflow-x-auto mt-5">
                <table
                  className="table-auto w-full bg-white border-collapse rounded-lg"
                  dir="rtl"
                >
                  <thead>
                    <tr className="bg-gray-300 ">
                      <th className="px-4  text-xs font-semibold text-gray-600 uppercase  border-b py-5 text-center">
                        آدرس
                      </th>

                      <th className="px-4  text-xs font-semibold text-gray-600 uppercase border-b py-5    text-center">
                        عملیات
                      </th>
                    </tr>
                  </thead>
                  {addressData.map((e) => (
                    <tbody className="text-gray-600 text-sm">
                      <tr className="border-b">
                        <td className="px-4 py-3 text-center">
                          {e.province} ، {e.city} ، {e.address} ،{e.plaque} ،
                          {e.buildingUnit}{" "}
                        </td>

                        <td className="px-4 py-3 font-semibold text-center">
                          <button
                            className="btn bg-red-500  text-white !py-1 rounded-xl text-sm font-normal"
                            onClick={() =>
                              CTX.setBottomSheetDeleteAddressOpen(true)
                            }
                          >
                            حذف{" "}
                          </button>{" "}
                        </td>
                      </tr>
                    </tbody>
                  ))}
                </table>
              </div>
            ) : (
              <div className="flex justify-center my-[100px]">
                <p className="mb-0  rounded-full w-fit shadow bg-white text-sm p-5 ">
                  شما آدرسی ندارید
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
      <BottomSheetDeleteAddress />
    </>
  );
};

export default page;