import React, { useEffect } from "react";
import Button from "../../button";
import UpgradeComponent from "./upgrade";
import api from "./api";
import styled from "styled-components";
// import Carousel from "react-multi-carousel";
// import "react-multi-carousel/lib/styles.css";
import moment from "moment";

import BoxIcon from "./boxIcon";
import InstructorMessage from "./messageSection";
import redirectURL from "../../../utils/redirectURL";
import Modal from "../../modalWrapper";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
import CustomCarousel from "../components/carousel.jsx";
const PersonalRightBar = ({ planState, onShowTest }) => {
  const { findText } = useTranslation(wordStore);
  const {
    handleGetCoursePersonal,
    coursePersonalData,
    handleGetUpcomingTestPersonal,
    upcomingTestPersonalData,
  } = api();
  useEffect(() => {
    handleGetCoursePersonal({
      "status[]": "ending_soon,active,scheduled",
      page_size: 4,
    });
    handleGetUpcomingTestPersonal({
      page_size: 100,
    });
  }, []);
  const courses = coursePersonalData?.data?.results;
  const upComingTest = upcomingTestPersonalData?.data?.results;
  console.log("upComingTests", upComingTest);

  return (
    <EnterpriseContainer
      className={planState === "GRACE PERIOD" ? "grace_period" : ""}
    >
      <Banner>
        <h3>{findText("Courses ending soon")}</h3>
        {courses?.length > 0 ? (
          <CustomCarousel
            items={courses}
            autoPlay
            interval={3500}
            renderItem={(course) => (
              <Course key={course?.id}>
                <img src={course?.thumbnail_dict?.url} alt="" />
                <div className="content">
                  <p className="date">
                    <span>{findText("Ends:")}</span>{" "}
                    {moment(course?.end_day).format("MMM DD, YYYY")}
                  </p>
                  <p className="name">{course?.name}</p>
                </div>
              </Course>
            )}
          />
        ) : (
          <EmptyCourse>
            <BoxIcon />
            <p>{findText("There is no course ending in the next 30 days")}</p>
          </EmptyCourse>
        )}
      </Banner>
      <TestSection>
        {upComingTest?.length > 0 ? (
          <>
            <h2>{findText("Upcoming test")}</h2>
            <div className="card">
              <p className="title">{upComingTest[0]?.title}</p>
              <div className="date-info">
                <span className="date-label">{findText("Start date & time:")}</span>
                <span className="date-value">
                  {moment(upComingTest[0]?.start_date).format(
                    "MMM DD, YYYY | hh:mma",
                  )}
                </span>
              </div>
              {upComingTest?.length > 1 && (
                <button
                  className="view-all"
                  onClick={() => {
                    onShowTest && onShowTest(upComingTest);
                  }}
                >
                  {findText("View all")}
                </button>
              )}
            </div>
          </>
        ) : (
          <EmptyTest>
            <BoxIcon />
            <p>{findText("There is no upcoming test.")}</p>
          </EmptyTest>
        )}
      </TestSection>

      <InstructorMessage
        // onClick={() => {
        //   window.location.href = redirectURL("/settings/payment");
        // }}
        title={findText("Coming soon!")}
        disabled={planState === "GRACE PERIOD"}
        messsage={findText(
          "Learn any language you want with Learngual while having fun every step of the way.",
        )}
        btnText={findText("Upgrade")}
        hideBtn
      />
    </EnterpriseContainer>
  );
};
const CustomDotsContainer = styled.li`
  border-radius: 3.091px;
  background: #dfe5e5;
  width: 8px;
  height: 4px;

  cursor: pointer;
  &.active {
    background-color: #00c2c2;
    width: 19px;
  }
`;
const Banner = styled.div`
  position: relative;
  padding: 0;
  border-radius: 0;
  padding-bottom: 25px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dfe5e5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;

  h3 {
    font-size: 14px;
    font-weight: 600;
  }
`;
const TestSection = styled.div`
  padding: 0;
  height: auto;
  padding: 0 0 20px;
  border-bottom: 1px solid #dfe5e5;
  margin-bottom: 52px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;

  h2 {
    font-size: 14px;
    font-weight: 600;
    color: #313333;
    letter-spacing: 0.28px;
  }

  > .card {
    background: #ffffff;
    border: 1px solid #f5f7f7;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .title {
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #313333;
      line-height: 24px;
    }

    .date-info {
      background: #e5f9f9;
      border-radius: 8px;
      padding: 5px 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;

      .date-label {
        font-size: 12px;
        color: #949999;
      }

      .date-value {
        font-size: 12px;
        color: #4a4d4d;
      }
    }

    .view-all {
      font-size: 12px;
      color: #febf10;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      text-align: left;
      font-family: inherit;
    }
  }
`;
const EmptyTest = styled.div`
  padding: 0 0 20px;
  border-bottom: 1px solid #dfe5e5;
  text-align: left;
  height: 100px;
  border-radius: 20px;
  background: #f5f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  svg {
  }
  > p {
    color: #636666;
    text-align: center;
    width: 100%;
    max-width: 144px;
    margin: 0 auto;
    font-size: 12px;
  }
`;
const EnterpriseContainer = styled.div`
  background: #fff;
  max-width: 232px;
  display: flex;
  /* align-items: center; */
  text-align: center;
  flex-direction: column;
  padding: 10px 0px;
  border-radius: 30px;

  .library_img {
    padding: 10px;
    margin-top: 20px;
  }

  /* GRACE PERIOD AND DEACTIVATED */

  &.grace_period {
    border-radius: 30.913px;
    border: 0.773px solid var(--Neutral-20, #dfe5e5);
    background: var(--Neutral-20, #dfe5e5);

    > div {
      border-radius: 30.913px;
      border: 0.773px solid var(--Neutral-20, #dfe5e5);
      background: var(--Neutral-20, #dfe5e5);

      > button {
        border-radius: 12px;
        background: var(--Neutral-50, #949999);
        box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
      }
    }
  }
  /* height: 580px; */
  width: 231px;
  padding: 20px 12px;
  .carousel-container {
    position: relative;

    .control-dots {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      bottom: 30;
    }
  }
  .more-slot {
    padding: 0px !important;
  }
`;
const Course = styled.div`
  width: 100%;

  border-radius: 18.548px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34.29%, #000 100%);

  > .content {
    position: relative;
    z-index: 2;
    flex: 1;
    height: 132px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    > .date {
      border-radius: 6.183px;
      background: #fff;
      display: flex;
      gap: 4px;
      width: fit-content;
      align-items: center;
      height: 22.758px;
      padding: 3px 10px;
      color: #4a4d4d;
      text-align: center;
      font-size: 12px;
      span {
        color: #f95454;
      }
    }
    > .name {
      color: var(--white, #fff);
      font-size: 14px;
      font-weight: 700;
      width: 99%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  img {
    width: 100%;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    inset: 0;
    object-fit: cover;
  }
`;
const EmptyCourse = styled.div`
  height: 132px;
  width: 100%;
  border-radius: 20px;
  background: #f5f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  > p {
    color: #636666;
    text-align: center;
    width: 100%;
    max-width: 144px;
    margin: 0 auto;
    font-size: 12px;
  }
`;
export default PersonalRightBar;
