import React from 'react';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import BarChart from '../../../Components/BarChart';
import LineChart from '../../../Components/LineChart';
import moment from 'moment';


function AdminDashboard() {
  const [fullStations, setFullStations] = useState([]);
  const [emptyStations, setEmptyStations] = useState([]);
  const [stationList, setStationList] = useState([]);
  const [stationChartData, setStationChartData] = useState({
  })
  // let navigate = useNavigate();
  const [rentalChartData, setRentalChartData] = useState({});


  useEffect(() => {
    axios.get(`/api/admin/stations/full`, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('accessToken')
      }
    }).then((response) => {
      setFullStations(response.data);
    });
  }, []);

  useEffect(() => {
    axios.get(`/api/admin/stations/empty`, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('accessToken')
      }
    }).then((response) => {
      setEmptyStations(response.data);
    });
  }, []);

  useEffect(() => {
    axios.get(`/api/admin/stations`, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('accessToken')
      }
    }).then((response) => {
      const data = response.data;
      console.log(data);

      setStationChartData({

        labels: response.data.map((station) => station.name),
        datasets: [{
          label: "Number of Bikes",
          data: response.data.map((station) => station.numberOfBikes),
          backgroundColor: [
            'rgba(255, 99, 132, 0.9)',
          ]
        },
        {
          label: "Total Slots",
          data: response.data.map((station) => station.totalSlots),
          backgroundColor: ['rgba(153, 102, 255, 0.9)']
        }
        ]
      });

    });
  }, []);

  useEffect(() => {
    axios.get(`/api/admin/rentals/weeklyStats`, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('accessToken')
      }
    }).then((response) => {
      const orderedDates = {};
      Object.keys(response.data).sort(function (a, b) {
        return moment(a, 'YYYY-MM-DD').toDate() - moment(b, 'YYYY-MM-DD').toDate();
      }).forEach(function (key) {
        orderedDates[key] = response.data[key];
      })
      // console.log(orderedDates)
      let dates = []
      let frequency = []
      Object.entries(orderedDates).forEach(([key, value]) =>
        dates.push(key)
      )
      Object.entries(orderedDates).forEach(([key, value]) =>
        frequency.push(value)
      )
      console.log(dates)

      setRentalChartData({

        labels: dates,
        datasets: [{
          label: "Number of rentals",
          data: frequency,
          backgroundColor: [
            'rgba(255, 99, 132, 0.9)',
            'rgba(54, 162, 235, 0.9)',
            'rgba(255, 206, 86, 0.9)',
            'rgba(75, 192, 192, 0.9)',
            'rgba(153, 102, 255, 0.9)',
            'rgba(255, 159, 64, 0.9)',
            'rgba(255, 99, 132, 0.9)',
          ]
        },
        ]
      });
    });
  }, []);


  return (
    <div>
      <h1 className='text-center mt-4 p-3 bg-velo'>Admin Dashboard</h1>
      <div className='container bg-white p-3 rounded-3' id="stationContainer">
        <div class="card my-5 shadow-custom">
          <h5 class="card-header nav-bg">Station Action Required</h5>
          <div class="card-body">
            <div className="accordion w-100" id="accordionExample">
              <div className="accordion-item">
                <h2 className="accordion-header" id="headingOne">
                  <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Full Stations: {fullStations.length}
                  </button>
                </h2>
                <div id="collapseOne" className="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                  <div className="accordion-body">
                    <ul>
                      {fullStations.map((station) => (
                        <li><Link className='text-decoration-none' to={"/admin/stations/transfer-bikes/" + station.id}>{station.name}</Link></li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
              <div className="accordion-item">
                <h2 className="accordion-header" id="headingTwo">
                  <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Empty Stations: {emptyStations.length}
                  </button>
                </h2>
                <div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                  <div className="accordion-body">
                    <ul>
                      {emptyStations.map((station) => (
                        <li>{station.name}</li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="card my-5 shadow-custom">
          <h5 class="card-header nav-bg">Current Station Capacity</h5>
          <div class="card-body">
            {stationChartData.datasets && <BarChart chartData={stationChartData} />}
          </div>
        </div>


        <div class="card my-5 shadow-custom">
          <h5 class="card-header nav-bg">Daily Rentals/Current Week</h5>
          <div class="card-body">
            {rentalChartData.datasets && <LineChart chartData={rentalChartData} />}
          </div>
        </div>
      </div>
      <div className="container">

      </div>



    </div>
  )
}

export default AdminDashboard