/* eslint-disable @next/next/no-img-element */
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import React, { useState } from 'react';
import router, { useRouter } from 'next/router';
import dynamic from 'next/dynamic';

import { Col, Row } from 'react-bootstrap';

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

export default function Calender() {
  const data = [
    { date: '2024-07-01', value: 30 },
    { date: '2024-07-02', value: 40 },
    { date: '2024-07-03', value: 35 },
    { date: '2024-07-04', value: 50 },
    { date: '2024-07-05', value: 49 },
    { date: '2024-07-06', value: 60 },
    { date: '2024-07-07', value: 70 },
    { date: '2024-07-08', value: 91 },
    { date: '2024-07-09', value: 125 },
    // add more data points as needed
  ];
  const [selectedRange, setSelectedRange] = useState('7'); // default to last 7 days

  const handleRangeChange = (event: any) => {
    setSelectedRange(event.target.value);
  };

  const filterData = () => {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(endDate.getDate() - parseInt(selectedRange));

    return data.filter((item: any) => {
      const date = new Date(item.date);
      return date >= startDate && date <= endDate;
    });
  };

  const filteredData = filterData();

  const options = {
    chart: {
      id: 'basic-bar',
      toolbar: {
        show: true,
      },
    },
    xaxis: {
      categories: filteredData.map((item: { date: any }) => item.date),
    },
    plotOptions: {
      bar: {
        borderRadius: 5,
        colors: {
          ranges: [
            {
              from: 0,
              to: 100,
              color: '#08BFA4',
            },
            {
              from: 101,
              to: 200,
              color: '#008A9C',
            },
          ],
          gradient: {
            shade: 'light',
            type: 'horizontal',
            shadeIntensity: 0.5,
            gradientToColors: ['#008A9C'],
            inverseColors: true,
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0, 100],
          },
        },
      },
    },
  };

  const series = [
    {
      name: 'series-1',
      data: filteredData.map((item: { value: any }) => item.value),
    },
  ];
  return (
    <>
      <DashboardLayout>
        <div className="onetime-page">
          <div className="back-link">
            <img src={'/images/sidbar-icon/arrow-left.svg'} onClick={() => router.back()} alt="" />
            <h4 className="heading mb-0">Back</h4>
          </div>
          <h2 className="heading mt-3">Home</h2>
          <div className="chart">
            <div>
              <label htmlFor="range">Select Range: </label>
              <select id="range" value={selectedRange} onChange={handleRangeChange}>
                <option value="7">Last 7 Days</option>
                <option value="30">Last 30 Days</option>
                <option value="90">Last 90 Days</option>
              </select>
            </div>
            <Chart options={options} series={series} type="bar" height={350} />
          </div>
        </div>

        <Row className="mt-4">
          <Col lg="3">
            <div className="donate-card" onClick={() => router.push('/history')}>
              <img src="/images/group2095.png" alt="" />
              <h4>Total Donation Received</h4>
              <h4>$10,090,787</h4>
            </div>
          </Col>
          <Col lg="3">
            <div className="donate-card">
              <img src="/images/group2095.png" alt="" />
              <h4>Total Donors</h4>
              <h4>10,090</h4>
            </div>
          </Col>
          <Col lg="3">
            <div className="donate-card" onClick={() => router.push('/campaign')}>
              <img src="/images/group2095.png" alt="" />
              <h4>Total Campaign</h4>
              <h4>400</h4>
            </div>
          </Col>
        </Row>
      </DashboardLayout>
    </>
  );
}