import React, {useState, useEffect} from "react";
import { useNavigate } from "react-router-dom";
import { AuthService, CustomerService } from "../../services";
import { Export } from "../../shared";
import { Plus } from "react-bootstrap-icons";
import DashboardCustomersList from "../dashboard/DashboardCustomersList";

const CustomersList = () => {
  const navigate = useNavigate();
  const [customers, setCustomers] = useState([]);
  const [columns] = useState([
    { key: 'name', label:'Name', show: true },
    { key: 'chinese_name', label: 'Preferred Name', show: true },
    { key: 'email', label: 'Email', show: true },
    { key: 'type', label: 'Type', show: true },
    { key: 'pickup_status', label: 'Pickup Status', show: true },
    { key: 'birth_date', label: 'Date of Birth', show: true },
    { key: 'gender', label: 'Gender', show: true },
    { key: 'language', label: 'Language', show: true },
    { key: 'medicare_number', label: 'Medicare Number', show: true },
    { key: 'medicaid_number', label: 'Medicaid Number', show: true },
    { key: 'address', label: 'Address', show: true },
    { key: 'phone', label: 'Phone', show: true },
    { key: 'emergency_contact', label: 'Fasting', show: true },
    { key: 'health_condition', label: 'Health Condition', show: true },
    { key: 'payment_status', label: 'Payment Status', show: true },
    { key: 'payment_due_date', label: 'Payment Due Date', show: true },
    { key: 'service_requirement', label: 'Service Requirement', show: true },
    { key: 'tags', label: 'Tags', show: true }
  ]);

  useEffect(() => {
    if (!AuthService.canViewCustomers()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
      return;
    }
    CustomerService.getAllCustomers().then((data) => {
      const customerData = data.data.map((item) => {
        item.phone = item?.phone || item?.home_phone || item?.mobile_phone;
        item.address = item?.address1 || item?.address2 || item?.address3 || item?.address4 || item?.address5;
        return item;
      }).sort((a, b) => a.lastname > b.lastname ? 1 : -1);
      setCustomers(customerData);
    });
  }, [navigate]);

  const goToCreateNew = () => {
    navigate(`/customers`);
  }

  const additionalButtons = ({ showExportDropdown, onExportToggle }) => (
    <>
      <button className="btn btn-primary me-2" onClick={() => goToCreateNew()}>
        <Plus size={16}></Plus>Add New Customer
      </button>
      <Export 
        columns={columns} 
        data={customers.map((customer) => ({
          ...customer,
          address: customer?.address1 || customer?.address2 || customer?.address3 || customer?.address4 || customer?.address5,
          phone: customer?.phone || customer?.home_phone || customer?.mobile_phone,
          tags: customer?.tags?.join(', ')
        }))} 
        filename="customers"
        show={showExportDropdown}
        onToggle={onExportToggle}
      />
    </>
  );

  return (
    <DashboardCustomersList 
      showBreadcrumb={true}
      title="All Customers"
      additionalButtons={additionalButtons}
    />
  );
};

export default CustomersList;
