'use client';
import React, { useEffect, useState, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchRoles } from './slice';
import type { ColumnsType } from 'antd/es/table';
import { Button, Table, Space, Popconfirm, notification } from 'antd';
import { SearchOutlined, DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import ModalBox from './component/modal';
import { deleteRole } from './service';
import type { AppDispatch, RootState } from '@/store/store';
import type { Role, City, AllCurrentRoles, ScopingType, RoleSearchParams } from './interface';
import InputSearch from '@/components/form/InputSearch';
import PageHeader from '@/components/pageHeader';
const RoleList: React.FC = () => {
  const { roles, allCities, allCurrentRoles, scopingTypes, status } = useSelector((state: RootState) => state.roles);
  const dispatch: AppDispatch = useDispatch();
  const searchQuery = '';
  const [isAddRoleModalVisible, setIsAddRoleModalVisible] = useState(false);
  const [editRoleData, setEditRoleData] = useState<Role | null>(null);
  const [cities, setCities] = useState<City[] | null>(null);
  const [allRoles, setAllRoles] = useState<AllCurrentRoles[] | null>(null);
  const [scopingTypesData, setScopingTypesData] = useState<ScopingType[] | null>(null);
  const [filters, setFilters] = useState<RoleSearchParams>({
    page: 1,
    sortColumn: 'sort_order',
  });

  const handleGetRoles = useCallback((filter: RoleSearchParams): void => {
    dispatch(fetchRoles(filter));
  }, [dispatch]);

  useEffect(() => {
    handleGetRoles(filters);
  }, [filters, handleGetRoles]);

  // handle delete role
  const handleDeleteRole = (roleId: number): void => {
    deleteRole(roleId)
      .then((response) => {
        const { message } = response?.data || {};
        notification.success({
          message: 'Success',
          description: message,
        });
        handleGetRoles(filters);
      })
      .catch((error) => {
        setTimeout(() => {
          const errorMessage = error?.response?.data?.message as string;

          if (errorMessage !== null) {
            notification.error({
              message: 'Error',
              description: errorMessage,
            });
          } else {
            notification.error({
              message: 'Error',
              description: 'There was an error deleting the role.',
            });
          }
        }, 0);
      });
  };
  const filteredRoles = roles?.filter((role) =>
    role?.name.toLowerCase().includes(searchQuery?.toLowerCase())
  );
  const openAddRoleModal = (): void => {
    setIsAddRoleModalVisible(true);
    setCities(allCities as unknown as City[]);
    setAllRoles(allCurrentRoles as unknown as AllCurrentRoles[]);
    setScopingTypesData(scopingTypes as ScopingType[]);
    setEditRoleData(null);
  };
  const openEditRoleModal = (roleData: Role): void => {
    setCities(allCities as unknown as City[]);
    setAllRoles(allCurrentRoles as unknown as AllCurrentRoles[]);
    setScopingTypesData(scopingTypes as ScopingType[]);
    setIsAddRoleModalVisible(true);
    setEditRoleData(roleData);
  };
  const closeAddRoleModal = (): void => {
    setIsAddRoleModalVisible(false);
    setEditRoleData(null);
  };

  const handleCreateOrUpdateRole = (): void => {
    handleGetRoles(filters);
    closeAddRoleModal();
  };

  let invisibleAction = false
  const columns: ColumnsType<Role> = [
    {
      title: 'Label',
      dataIndex: 'label',
      key: 'label',
      width: '45%',
      className: 'word-break',
      onFilter: (value: boolean | React.Key, record: Role) => record?.name.indexOf(value as string) === 0,

      filterIcon: (filtered: boolean) => (
        <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
      ),
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: '45%',
      className: 'word-break',
      onFilter: (value: boolean | React.Key, record: Role) => record?.name.indexOf(value as string) === 0,
      filterIcon: (filtered: boolean) => (
        <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
      ),
    },

    {
      title: 'Action',
      key: 'actions',
      width: '120px',
      className: 'nowrap',
      align: 'center',
      render: (record: Role) => (
        <span>
          {/* {record.is_default !== 1 ? ( */}
          { invisibleAction ? (
            <Space size="small">
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                size="middle"
                title="Edit"
                onClick={() => {
                  openEditRoleModal(record);
                }}
              />

              <Popconfirm
                title="Are you sure you want to delete this role?"
                onConfirm={() => {
                  handleDeleteRole(record.id);
                }}
                okText="Yes"
                cancelText="No"
                placement="topRight"
              >
                <Button
                  type="primary"
                  shape="circle"
                  icon={<DeleteOutlined />}
                  size="middle"
                  title="Delete"
                  danger
                />
              </Popconfirm>
            </Space>
          ) : null}
        </span>
      ),
    },
  ];

  const onChange = (pagination: unknown, tableFilters: RoleSearchParams): void => {
    const newFilters = {
      ...tableFilters,
    };

    setFilters(newFilters);
    handleGetRoles(newFilters);
  };
  return (
    <div>
      <PageHeader
        title="Role"
        isBack={false}
        extra={
          <Space size="middle" align="start">
            <InputSearch
              onSearch={(search) => {
                handleGetRoles({ ...filters, page: 1, search });
              }}
            />
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                openAddRoleModal();
              }}>
                            Add New Role
            </Button>
          </Space>
        }
      />

      <div>
        <Table
          dataSource={filteredRoles?.map((role: Role) => ({ ...role, key: role?.id }))}
          columns={columns}
          rowKey="id"
          loading={status === 'loading'}
          pagination={false}
          onChange={onChange}
          bordered
          tableLayout="fixed"
          scroll={{ x: true }}
        />
      </div>

      <ModalBox
        isModalOpen={isAddRoleModalVisible}
        handleClose={closeAddRoleModal}
        handleOk={handleCreateOrUpdateRole}
        data={editRoleData}
        cities={cities!}
        allRoles={allRoles!}
        scopingTypes={scopingTypesData!}
      />
    </div>
  );
};

export default RoleList;