import Link from "next/link";
import { Publisher } from "@prisma/client"
// import {IsDateXMonthsAgo}  from "../../helpers/const"
import { useEffect, useState } from 'react'
import toast from "react-hot-toast";

import axiosInstance from '../../src/axiosSecure';

//add months to date. works with negative numbers and numbers > 12
export function addMonths(numOfMonths, date) {
  var date = new Date(date);
  var m, d = (date = new Date(+date)).getDate();
  date.setMonth(date.getMonth() + numOfMonths, 1);
  m = date.getMonth();
  date.setDate(d);
  if (date.getMonth() !== m) date.setDate(0);
  return date;

}

//is date in range of months from and to
//usage: 
//is date in last month: IsDateInXMonths(date, -1, 0)
//is date in current month: IsDateInXMonths(date, 0, 0)
//is date in next month: IsDateInXMonths(date, 0, 1)

export function IsDateInXMonths(date, monthsFrom, monthsTo) {
  var date = new Date(date);
  var dateYearMonth = new Date(date.getFullYear(), date.getMonth(), 1);
  if (monthsFrom === undefined) monthsFrom = -100;
  if (monthsTo === undefined) monthsTo = 100;
  // var from = new Date(date.setMonth(dateYearMonth.getMonth()+monthsFrom));
  // var to = new Date(date.setMonth(dateYearMonth.getMonth()+monthsTo));
  var from = addMonths(monthsFrom, dateYearMonth);
  var to = addMonths(monthsTo, dateYearMonth);
  //is date between from and to
  return date >= from && date <= to;
};

export default function PublisherCard({ publisher }) {

  const [isCardVisible, setIsCardVisible] = useState(true);

  const handleDelete = async (id) => {
    try {
      console.log("card: deleting publisher = ", id, "url: ", `/api/data/publishers/${id}`);
      const response = await axiosInstance.delete(`/api/data/publishers/${id}`);
      if (response.status === 200) {
        document.getElementById(`publisher-card-${id}`).classList.add('cardFadeOut');
        setTimeout(() => setIsCardVisible(false), 300);
      }
    } catch (error) {
      console.log(JSON.stringify(error));
    }
  };

  return isCardVisible ? (
    // className="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mb-3"
    <div id={`publisher-card-${publisher.id}`} className={`relative block p-6 max-w-sm rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 mb-3
    ${publisher.isImported ? "bg-orange-50" : (publisher.isTrained ? "bg-white" : "bg-red-50")}`}>
      <a
        href={`/cart/publishers/edit/${publisher.id}`}
        className=""
        key={publisher.id}
      >

        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
          {publisher.firstName}  {publisher.lastName} ({publisher.isactive ? "active" : "inactive"})
        </h5>
        <div className="font-normal text-gray-700 dark:text-gray-200">
          <p> {publisher.assignments.length} смени общо</p>
          <p> достъпност: {publisher.availabilities?.length}</p>
          {/* <p> {publisher.shifts.filter(s => IsDateInXMonths(s.startTime, -1, 0)).length} last month</p>
        <p> {publisher.shifts.filter(s => IsDateInXMonths(s.startTime, 0, 0)).length} this month</p>
        <p> {publisher.shifts.filter(s => IsDateInXMonths(s.startTime, 0, 1)).length} next month</p> */}
        </div>
      </a>
      <div className="absolute bottom-2 right-2">
        <button onClick={() => handleDelete(publisher.id)} aria-label="Delete Publisher">
          <svg className="w-5 h-6 text-red-500 hover:text-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M10 11V17" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M14 11V17" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M4 7H20" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

            {/* <path d="M8 9a1 1 0 000 2h4a1 1 0 100-2H8z" />
            <path fillRule="evenodd" d="M4.293 4.293A1 1 0 015.707 3.707L10 8l4.293-4.293a1 1 0 111.414 1.414L11.414 9l4.293 4.293a1 1 0 01-1.414 1.414L10 10.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 9 4.293 4.707a1 1 0 010-1.414z" clipRule="evenodd" /> */}
          </svg>
        </button>
      </div>
      <style jsx>{`
      .cardFadeOut {
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: scale(0.8);
      }
    `}</style>
    </div>
  ) : null;
}