import React, {useState, useEffect} from "react";
import { useNavigate } from "react-router-dom";
import { AuthService, ResourceService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Dropdown } from "react-bootstrap";
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
import ReactPaginate from 'react-paginate';
import { ManageTable, Export } from "../../shared/components";
import { RESOURCE_TYPE_OPTIONS, RESOURCE_SPECIALTY_OPTIONS } from "../../shared";

const ResourcesList = () => {
  const navigate = useNavigate();
  const [resources, setResources] = useState([]);
  const [keyword, setKeyword] = useState('');
  const [currentItems, setCurrentItems] = useState(null);
  const [sorting, setSorting] = useState({key: '', order: ''});
  const [selectedItems, setSelectedItems] = useState([]);
	// Here we use item offsets; we could also use page offsets
	// following the API or data you're working with.
	const [itemOffset, setItemOffset] = useState(0);
	const [pageCount, setPageCount] = useState(0);
	const [itemsPerPage, setItemsPerPage] = useState(10);
  const [showDeletedItems, setShowDeletedItems] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [showFilterDropdown, setShowFilterDropdown] = useState(false);
  const [typeFilter, setTypeFilter] = useState('');
  const [specialtyFilter, setSpecialtyFilter] = useState('');
  const [columns, setColumns] = useState([
    {
      key: 'name',
      label: 'Provider',
      show: true
    },
    {
      key: 'office_name',
      label: 'Office Name',
      show: true
    },
    {
      key: 'type',
      label: 'Type',
      show: true
    },
    {
      key: 'specialty',
      label: 'Specialty',
      show: true
    },
    {
      key: 'phone',
      label: 'Office Phone Number',
      show: true
    },
    {
      key: 'email',
      label: 'Email',
      show: true
    },
    {
      key: 'display_address',
      label: 'Address',
      show: true
    }
  ]);
  useEffect(() => {
    if (!AuthService.canAccessLegacySystem()) {
      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`);
    }
    ResourceService.getAll().then(data => {
      setResources(data.data);
    }) 
  }, []);

  const getFilteredResources = () => {
    return (showDeletedItems ? resources.filter(item => item.status !== 'active') : resources.filter(item => item.status === 'active'))
      ?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) )))
      ?.filter(resource => !typeFilter || (resource?.type || '') === typeFilter)
      ?.filter(resource => !specialtyFilter || (resource?.specialty || '') === specialtyFilter);
  };

  useEffect(() => {
		const endOffset = itemOffset + parseInt(itemsPerPage);
    const newResources = getFilteredResources();
    const sortedResources = sorting.key === '' ? newResources : newResources.sort((a, b) => {
      return a[sorting.key]?.localeCompare(b[sorting.key]);
    });
    const results = sorting.order === 'asc' ? sortedResources : sortedResources.reverse();
		setCurrentItems(results.slice(itemOffset, endOffset)?.map(item => {
      // Format address for display
      const line1 = item?.address_line_1 || item?.address || '';
      const city = item?.city || '';
      const state = item?.state || '';
      const zipcode = item?.zipcode || '';
      const display_address = [line1, city, state, zipcode].filter(Boolean).join(', ') || '-';
      
      return Object.assign({}, item, { 
        office_name: item?.office_name || item?.name_original || '-',
        display_address
      });
    }));
		setPageCount(Math.ceil((newResources.length || 0) / itemsPerPage));
	}, [resources, itemOffset, keyword, itemsPerPage, showDeletedItems, sorting, typeFilter, specialtyFilter]);

  // useEffect(() => {
  //   const newResources = currentItems? [...currentItems] : [];
  //   console.log('here', sorting);
    
  //   setCurrentItems(
  //     sorting.order === 'asc' ? sortedResources : sortedResources.reverse()
  //   )
  // }, [sorting]);

	const handlePageClick = (event) => {
		const filteredLength = getFilteredResources().length || 1;
		const newOffset = (event.selected * itemsPerPage) % filteredLength;
		console.log(
			`User requested page number ${event.selected}, which is offset ${newOffset}`
		);
		setItemOffset(newOffset);
    setCurrentPage(event.selected + 1);
	};

  const handlePageSelect = (pageNo) => {
		const filteredLength = getFilteredResources().length || 1;
		const newOffset = ((pageNo-1) * itemsPerPage) % filteredLength;
		console.log(
			`User requested page number ${pageNo}, which is offset ${newOffset}`
		);
		setItemOffset(newOffset);
	};

  const getSortingImg = (key) => {
    return sorting.key === key ? (sorting.order === 'asc' ? 'up_arrow' : 'down_arrow') : 'default';
  }

  const sortTableWithField = (key) => {
    let newSorting = {
      key,
      order: 'asc',
    }
    
    if (sorting.key === key && sorting.order === 'asc') {
      newSorting = {...newSorting, order: 'desc'};
    }
    setSorting(newSorting);
  }

  const redirectToAdmin = () => {
    navigate(`/medical`)
  }

  const goToEdit = (id) => {
    navigate(`/medical/resources/edit/${id}`)
  }

  const goToCreateNew = () => {
    navigate(`/medical/resources`)
  }

  const goToView = (id) => {
    navigate(`/medical/resources/${id}`)
  }

  const toggleSelectedAllItems = () => {
    if (selectedItems.length !== currentItems?.length || selectedItems?.length === 0) {
      const newSelectedItems = [...currentItems].map((provider) => provider.id);
      setSelectedItems(newSelectedItems);
    } else {
      setSelectedItems([]);
    }
  }

  const toggleItem  = (id) => {
    if (selectedItems.includes(id)) {
      const newSelectedItems = [...selectedItems].filter((item) => item !== id);
      setSelectedItems(newSelectedItems);
    } else {
      const newSelectedItems = [...selectedItems, id];
      setSelectedItems(newSelectedItems);
    }
  }

	const showArchive = (value) => {
		console.log('here', value);
		setShowDeletedItems(value === 'archivedProviders');
		// Recover all filters
		setKeyword('');
    setTypeFilter('');
    setSpecialtyFilter('');
		setSorting({key: '', order: ''});
		setSelectedItems([]);
	}

  const clearAndCloseFilter = () => {
    setTypeFilter('');
    setSpecialtyFilter('');
    setShowFilterDropdown(false);
  };

  const applyAndCloseFilter = () => {
    setShowFilterDropdown(false);
  };

  const customFilterMenu = React.forwardRef(
    ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => (
      <div
        ref={ref}
        style={style}
        className={className}
        aria-labelledby={labeledBy}
      >
        <h6>Filter By</h6>
        <div className="app-main-content-fields-section margin-sm dropdown-container">
          <div className="me-4">
            <div className="field-label">Type</div>
            <select value={typeFilter} onChange={(e) => setTypeFilter(e.currentTarget.value)}>
              <option value="">All</option>
              {RESOURCE_TYPE_OPTIONS.map((item) => (
                <option key={item.value} value={item.value}>{item.label}</option>
              ))}
            </select>
          </div>
          <div className="me-4">
            <div className="field-label">Specialty</div>
            <select value={specialtyFilter} onChange={(e) => setSpecialtyFilter(e.currentTarget.value)}>
              <option value="">All</option>
              {RESOURCE_SPECIALTY_OPTIONS.map((item) => (
                <option key={item.value} value={item.value}>{item.label}</option>
              ))}
            </select>
          </div>
        </div>
        <div className="list row">
          <div className="col-md-12">
            <button className="btn btn-default btn-sm float-right" onClick={clearAndCloseFilter}> Cancel </button>
            <button className="btn btn-primary btn-sm float-right" onClick={applyAndCloseFilter}> Filter </button>
          </div>
        </div>
      </div>
    )
  );

  const checkSelectAll = () => {
    return selectedItems?.length === currentItems?.length && selectedItems?.length > 0;
  }

  const deleteResource = (id) => {
    const currentResource = resources.find((item) => item.id === id);
    ResourceService.disableResource(id, { status: 'inactive', edit_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name,
    edit_date: new Date(),
    edit_history: currentResource?.edit_history? [...currentResource.edit_history, { employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }] : [{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]}).then(() => {
      ResourceService.getAll().then(data => {
        setResources(data.data);
      }) 
    });
  }

  const table = <div className="list row mb-4">
		<div className="col-md-12">
			<table className="personnel-info-table"> 
				<thead>
					<tr>
						<th className="th-checkbox"><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
            <th className="th-index">No.</th>
						{
							columns.filter(col => col.show).map((column, index) => <th className="sortable-header" key={index}>
								{column.label}  <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
							</th>)
						}
					</tr>
				</thead>
				<tbody>
					{
						currentItems?.map((resource, index) => <tr key={resource?.id}>
							<td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(resource.id)} onClick={()=>toggleItem(resource?.id)}/></td>
              <td className="td-index">{itemOffset + index + 1}</td>
							{columns.find(col => col.key === 'name')?.show && <td> {AuthService.canAccessLegacySystem() && <PencilSquare size={16} className="clickable me-2" onClick={() => goToEdit(resource?.id)}></PencilSquare>} {AuthService.canAccessLegacySystem() ? <button className="btn btn-link btn-sm" onClick={() => goToView(resource?.id)}>{resource?.name || '-'}</button> : (resource?.name || '-') } </td>}
							{columns.find(col => col.key === 'office_name')?.show && <td>{resource?.office_name || '-'}</td>}
							{columns.find(col => col.key === 'type')?.show && <td>{resource?.type || '-'}</td>}
							{columns.find(col => col.key === 'specialty')?.show && <td>{resource?.specialty || '-'}</td>}
							{columns.find(col => col.key === 'phone')?.show && <td>{resource?.phone || '-'}</td>}
              {columns.find(col => col.key === 'email')?.show && <td>{resource?.email || '-'}</td>}
							{columns.find(col => col.key === 'display_address')?.show && <td>{resource?.display_address}</td>}
						</tr>)
					}
				</tbody>
			</table>
      <div className="pagination-container">
        <ReactPaginate
          key={itemsPerPage}
          className="customers-pagination"
          breakLabel="..."
          nextLabel="Next"
          onPageChange={handlePageClick}
          pageRangeDisplayed={5}
          pageCount={pageCount}
          previousLabel="Prev"
          renderOnZeroPageCount={null}
          containerClassName="pagination justify-content-center"
          pageClassName="page-item"
          pageLinkClassName="page-link"
          previousClassName="page-prev-item"
          previousLinkClassName="page-link"
          nextClassName="page-next-item"
          nextLinkClassName="page-link"
          activeClassName="active"
          breakClassName="page-item"
          breakLinkClassName="page-link"
        />
        <div className="select-page-container">
          <input type="number" className="page-picker" max={pageCount} min={1} value={currentPage} onChange={(e) => {handlePageSelect(e.target.value); setCurrentPage(e.target.value)}}/>
          <div className="per-page-label"> {` of ${pageCount}`}</div>
        </div>

        <div className="select-page-container">
          <select className="per-page" value={itemsPerPage} onChange={e => setItemsPerPage(e.target.value)}>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select> <span className="per-page-label"> /page</span>
        </div>
      </div>
      
		</div>
	</div>;
  
  return (
    <>
      <div className="list row mb-4">
      <Breadcrumb>
          <Breadcrumb.Item href="/medical/index">Medical</Breadcrumb.Item>
          <Breadcrumb.Item active>
             Provider Information
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>
             All Providers
           </h4> 
        </div>
      </div>
      <div className="app-main-content-list-container list-page">
				<div className="app-main-content-list-func-container">
					<Tabs defaultActiveKey="activeProviders" id="provider-tab" onSelect={(k) => showArchive(k)}>
						<Tab eventKey="activeProviders" title="Active Providers">
							{table}
						</Tab>
						<Tab eventKey="archivedProviders" title="Archived Providers">
							{table}
						</Tab>
					</Tabs>
					<div className="list-func-panel">
						<input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword}  onChange={(e) => setKeyword(e.currentTarget.value)} />
						<ManageTable columns={columns} onColumnsChange={setColumns} />
            <Dropdown
              key={'filter-providers'}
              id="filter-providers"
              className="me-2"
              show={showFilterDropdown}
              onToggle={(isOpen) => setShowFilterDropdown(isOpen)}
              autoClose={false}
            >
              <Dropdown.Toggle variant="primary">
                <Filter size={16} className="me-2"></Filter>Filter
              </Dropdown.Toggle>
              <Dropdown.Menu as={customFilterMenu}/>
            </Dropdown>
						<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Providers</button>
						<Export 
							columns={columns} 
							data={currentItems || []} 
							filename="resources" 
						/>
					</div>
				</div>
      </div>
     
    </>
  )
};

export default ResourcesList;