/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React, { useEffect } from "react";
/* -------------------------------------------------------------------------- */
/*                                    Misc                                    */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Card from "components/containers/Card";
import TextAction from "components/controls/TextAction";
import HexagonOutlined from "components/HexagonOutlined";
import AvailabilityIndicator from "components/indicators/AvailabilityIndicator";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGArrowRightShortIcon } from "assets/svg/arrow-right-short.svg";
/* -------------------------------------------------------------------------- */
/*                               Dashboard page                               */
/* -------------------------------------------------------------------------- */

import { useServicesStore } from "services/data/servicesSlice";
import { useServicesViewModel } from "services/controller/servicesViewModel";
import CircleLoader from "components/CircleLoader";
import _ from "lodash";
import { useUIStore } from "ui/data/uiSlice";
import Button from "components/controls/Button";
import { useNavigate } from "react-router-dom";
import { useSubscriptionsStore } from "subscriptions/data/subscriptionsSlice";
import { useSubscriptionsViewModel } from "subscriptions/controller/subscriptionsViewModel";

export default function Dashboard() {
  const navigate = useNavigate();
  /* --------------------------------- Stores --------------------------------- */
  const servicesStore = useServicesStore();
  const uiStore = useUIStore();
  const subscriptionsStore = useSubscriptionsStore();
  /* ------------------------------- View models ------------------------------ */
  const { services, isLoading: servicesLoading } = useServicesViewModel({
    ...servicesStore,
    notify: uiStore.notify,
  });
  const {
    forkTo,
    isLoading: subscriptionsLoading,
    subscriptions,
    hasSubscription,
  } = useSubscriptionsViewModel(subscriptionsStore, uiStore);
  /* ---------------------------------- Hooks --------------------------------- */
  const Wrapper: React.FC = React.useMemo(
    () => (props) =>
      (
        <div className="grid grid-cols-4 grid-rows-none gap-x-8 gap-y-8">
          {props.children}
          <Card className="border border-dashed border-gray-400">
            <div className="flex space-x-4 items-center mb-2">
              <div className="basis-16">
                <HexagonOutlined
                  fontSize={16}
                  className="w-full h-full transition-colors"
                >
                  new
                </HexagonOutlined>
              </div>
              <div className="flex-grow">
                <Button
                  variant="emerald"
                  type="outline"
                  onClick={() => navigate("/services")}
                >
                  Connect service
                </Button>
              </div>
            </div>
            <div className="pl-20 opacity-40">
              <div className="rounded-sm h-4 mb-1 bg-gray-600"></div>
              <div className="rounded-sm h-4 mb-1 bg-gray-600"></div>
              <div className="rounded-sm h-4 mb-1 bg-gray-600 w-3/6"></div>
            </div>
            <div className="text-right">
              <TextAction
                onClick={() => navigate("/services")}
                className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
              >
                <span className="transition-all">connect</span>
                <SVGArrowRightShortIcon className="w-3 h-3 fill-white transition-all" />
              </TextAction>
            </div>
          </Card>
        </div>
      ),
    []
  );
  /* --------------------------------- Markup --------------------------------- */
  if (subscriptionsLoading) {
    return (
      <div className="flex items-center justify-center">
        <div className="basis-12">
          <CircleLoader />
        </div>
      </div>
    );
  }
  if (!services || servicesLoading) {
    return (
      <Wrapper>
        {_.map(subscriptions, (index) => (
          <Card key={index} variant="gray">
            <div className="flex space-x-4 items-center mb-2">
              <div className="basis-16">
                <CircleLoader />
              </div>
              <div className="flex-grow">
                <div className="text-2xl font-semibold leading-tight mb-2">
                  Loading..
                </div>
                <AvailabilityIndicator active={false}>
                  unknown
                </AvailabilityIndicator>
              </div>
            </div>
            <div className="pl-20 opacity-40">
              <div className="rounded-sm h-4 mb-1 bg-gray-600"></div>
              <div className="rounded-sm h-4 mb-1 bg-gray-600"></div>
              <div className="rounded-sm h-4 mb-1 bg-gray-600 w-3/6"></div>
            </div>
            <div className="text-right">
              <TextAction className="font-semibold inline-flex items-center space-x-2 hover:space-x-3">
                <span className="transition-all">open</span>
                <SVGArrowRightShortIcon className="w-3 h-3 fill-white transition-all" />
              </TextAction>
            </div>
          </Card>
        ))}
      </Wrapper>
    );
  }
  return (
    <Wrapper>
      {services
        ?.filter((service) => {
          return hasSubscription(service.id);
        })
        .map((service) => (
          <Card key={service.shortName} variant={service.variant ?? "gray"}>
            <div className="flex space-x-4 items-center mb-2">
              <div className="basis-16">
                <HexagonOutlined
                  fontSize={22}
                  className="w-full h-full transition-colors"
                >
                  {service.shortName}
                </HexagonOutlined>
              </div>
              <div className="flex-grow">
                <div className="text-2xl font-semibold leading-tight mb-2">
                  {service.name}
                </div>
                <AvailabilityIndicator active={true}>
                  active
                </AvailabilityIndicator>
              </div>
            </div>
            <div className="pl-20 opacity-40 text-sm min-h-[4rem]">
              {service.description}
            </div>
            <div className="text-right">
              <TextAction
                href={service.href}
                onClick={(e) => {
                  e.preventDefault();
                  forkTo(service.id, service.href);
                }}
                className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
              >
                <span className="transition-all">open</span>
                <SVGArrowRightShortIcon className="w-3 h-3 fill-white transition-all" />
              </TextAction>
            </div>
          </Card>
        ))}
    </Wrapper>
  );
}
