import Image from "next/image";
import React, { useState } from "react";

const DetailSchedule = ({ activityById }) => {
  const [showInfo, setShowInfo] = useState(false);
  const handleMouseEnter = () => {
    setShowInfo(true);
  };

  const handleMouseLeave = () => {
    setShowInfo(false);
  };
  const returnAvilablleDaysArray = ({ data }) => {
    let array = [];
    if (data.attributes.availableOnMonday) {
      array = [...array, { name: "Monday", value: "monday" }];
    }
    if (data.attributes.availableOnTuesday) {
      array = [...array, { name: "Tuesday", value: "tuesday" }];
    }
    if (data.attributes.availableOnWednesday) {
      array = [...array, { name: "Wednesday", value: "wednesday" }];
    }
    if (data.attributes.availableOnThursday) {
      array = [...array, { name: "Thursday", value: "thursday" }];
    }
    if (data.attributes.availableOnFriday) {
      array = [...array, { name: "Friday", value: "friday" }];
    }
    if (data.attributes.availableOnSaturday) {
      array = [...array, { name: "Saturday", value: "saturday" }];
    }
    if (data.attributes.availableOnSunday) {
      array = [...array, { name: "Sunday", value: "sunday" }];
    }
    return array;
  };
  return (
    <div className="row mb-5">
      {activityById && (
        <div className="col-12">
          <ul className="availability-wrappper">
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
              </span>
              From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate}
            </li>
            {/* <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
              </span>
              Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime}
            </li> */}
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
              </span>
              Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Mins
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
              </span>
              Contact: {activityById.data.attributes.phoneNumber}
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
              </span>
              Active on:{" "}
              {returnAvilablleDaysArray({ data: activityById.data })
                .map(item => {
                  return item.name;
                })
                .join(", ")}
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
              </span>
              Age: {activityById.data.attributes.ageLowerLimit}+
              <div className="info-div">
                <a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
                </a>
                {showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
              </div>
            </li>
            <li>
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
              </span>
              Activity type: {activityById.data.attributes.activityType}
            </li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default DetailSchedule;