import { FC, useEffect, useState } from "react";
import * as CommonAPI from "../../../../pages/api/common";
import { baseUrl } from "../../../../constants/urls";
import type { ColumnsType } from "antd/es/table";
import { Button, Spin, Table, notification } from "antd";
import styles from "./userCreation.module.scss";
import UserCreation from "./UserCreation";
import {
  EditOutlined,
  DeleteOutlined,
  LoadingOutlined 
} from "@ant-design/icons";
import UserEdit from "./UserEdit";
import Head from "next/head";
interface DataType {
  key: React.Key;
  sno: string;
  userName: string;
  phone: any;
  email: any;
  role: any;
  id:any
} 
const antIcon = <LoadingOutlined style={{ fontSize: "26px" }} spin />;
const UserList:FC<any>=()=>{

    const [userData,setUserData] = useState([]);
    const [isAddUser, setIsAddUser] = useState(false);
    const [isEditUser, setIsEditUser] = useState(false);
    const [userEditData,setUserEditData] = useState<any>({});
    const [loginRes, setLoginRes] = useState<any>({});
    const [loadingSpin, setLoadingSpin] = useState(false);
    const columns: ColumnsType<DataType> = [
        {
          title: "S.No",
          dataIndex: "sno",
          key: "sno",
          render: (text, object, index) => {
            return index + 1;
          },
          responsive: ["xl", "md"],
        },
        
        {
          title: "User Name",
          dataIndex: "userName",
          key: "userName",
    
          sorter: (a: any, b: any) =>
            a?.first_name.localeCompare(b?.first_name),
    
          render: (text, object: any, index) => {
            return (
              
                <div>{object?.first_name} {object?.last_name}</div>
            
            );
          },
        },
        {
          title: "Phone Number",
          dataIndex: "phone",
          key: "phone",
    
          sorter: (a: any, b: any) =>
            a?.phone.localeCompare(b?.phone),
    
          render: (text, object: any, index) => {
            return object?.phone;
          },
        },
        {
            title: "Email",
            dataIndex: "email",
            key: "email",
      
            sorter: (a: any, b: any) =>
              a?.email.localeCompare(b?.email),
      
            render: (text, object: any, index) => {
              return object?.email;
            },
            responsive: ["xl", "md"],
          },
          {
            title: "Role",
            dataIndex: "role",
            key: "role",
      
            sorter: (a: any, b: any) =>
              a?.role?.name.localeCompare(b?.role?.name),
      
            render: (text, object: any, index) => {
              return object?.role?.name;
            },
            // responsive: ["xl", "md"],
          },


          {
            title: "Action",
            dataIndex: "",
            key: "",
      
            
            render: (text, object: any, index) => {
              return <>
                <div className="flex">
                <EditOutlined  style={{color:"#291C61" ,fontSize:"20px"}} onClick={()=>editData(object)}/>
                <DeleteOutlined style={{color:"red" ,fontSize:"20px",marginLeft:"10px"}} onClick={()=>deleteUser(object)}/>
                </div>
              </>
            },
          },
    
        
      ];

      const editData = (data:any)=>{
        
        setUserEditData(data);

        setTimeout(() => {
          setIsEditUser(true);
        }, 1000);
      }

    useEffect(()=>{
      setLoadingSpin(true);
        const val: any = localStorage.getItem("loginDetails");
        const details = JSON.parse(val);
        setLoginRes(details);
        CommonAPI.getRequest(`${baseUrl}/api/customer/users/list/${details?.data?.id}`).then((res)=>{
            
            setUserData(res?.data?.data);
            setLoadingSpin(false);

        })
    },[])
    const userAdd=()=>{
        setIsAddUser(true);
    }
    const backOption = () => {
        setIsAddUser(false);
        setIsEditUser(false);
        CommonAPI.getRequest(`${baseUrl}/api/customer/users/list/${loginRes?.data?.id}`).then((res)=>{
            
          setUserData(res?.data?.data);
          setLoadingSpin(false);

      })
      }

      const backeditOption = () => {
        setIsEditUser(false);
        setIsAddUser(false)
        CommonAPI.getRequest(`${baseUrl}/api/customer/users/list/${loginRes?.data?.id}`).then((res)=>{
            
          setUserData(res?.data?.data);
          setLoadingSpin(false);

      })
      }

      const deleteUser=(data:any)=>{
       setLoadingSpin(true);
        CommonAPI.deleteRequest(`${baseUrl}/api/customer/user/delete/${data?.id}`).then((res)=>{
          notification.success({message:res?.data?.message})
          CommonAPI.getRequest(`${baseUrl}/api/customer/users/list/${loginRes?.data?.id}`).then((res)=>{
            
            setUserData(res?.data?.data);
            setLoadingSpin(false);
        })
        })
      }

    return (
      <>
        {isAddUser && !isEditUser?<UserCreation  backOption={backOption}/>:!isAddUser && isEditUser?<UserEdit backeditOption={backeditOption} userEditData={userEditData}/>:<>
         <div className={styles.myUserContainer}>
            <div className="flex justify-between">
                <h1 className={styles.headerTitle}>User Management</h1>
                <Button type="primary" ghost onClick={userAdd}>Add User</Button>
                </div>
        <Table
            columns={columns}
            dataSource={userData}
            rowKey={(record: any) => {
              return record.id;
            }}
          />
          <Spin indicator={antIcon} spinning={loadingSpin} className={"loaderContainer"} />
          </div>
          
        </>}
        
        </>
    )
}

export default UserList;