import { Ionicons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import { getHomeData, HomeData } from "../../api";
import { useDevice } from "../../lib/device";
import { t } from "../../lib/locales";
import { colors } from "../../lib/theme";
import {
  Card,
  DeviceSelector,
  Divider,
  H2,
  Muted,
  Pill,
  Row,
  Screen,
} from "../../lib/ui";

export default function Index() {
  const [data, setData] = useState<HomeData | null>(null);
  const {
    devices,
    selectedDevice,
    selectDevice,
    isLoading: isDeviceLoading,
  } = useDevice();

  useEffect(() => {
    if (selectedDevice) {
      getHomeData(selectedDevice.id).then(setData);
    }
  }, [selectedDevice]);

  if (!selectedDevice && !isDeviceLoading)
    return (
      <Screen>
        <DeviceSelector
          devices={devices}
          selectedDevice={selectedDevice}
          onSelectDevice={selectDevice}
          isLoading={isDeviceLoading}
        />
        <Muted>{t("noDeviceSelectedPleaseLinkFirst")}</Muted>
      </Screen>
    );

  if (!data)
    return (
      <Screen>
        <DeviceSelector
          devices={devices}
          selectedDevice={selectedDevice}
          onSelectDevice={selectDevice}
          isLoading={isDeviceLoading}
        />
      </Screen>
    );

  return (
    <Screen>
      <DeviceSelector
        devices={devices}
        selectedDevice={selectedDevice}
        onSelectDevice={selectDevice}
        isLoading={isDeviceLoading}
      />

      <Card>
        <Row
          left={
            <Row
              left={
                <H2>
                  {data.overallStatus === "all_clear"
                    ? t("allClear")
                    : t("attentionNeeded")}
                </H2>
              }
              right={
                <Pill
                  label={
                    data.overallStatus === "all_clear"
                      ? t("today")
                      : t("review")
                  }
                  tone={
                    data.overallStatus === "all_clear" ? "good" : "attention"
                  }
                />
              }
            />
          }
        />
        <Muted>
          {data.overallStatus === "all_clear"
            ? t("nothingNeedsAttention")
            : t("fewItemsNeedReview")}
        </Muted>

        <Divider />

        <Row
          left={
            <Row
              left={
                <Row
                  left={
                    <Ionicons
                      name={data.deviceOnline ? "wifi" : "wifi"}
                      size={18}
                      color={
                        data.deviceOnline ? colors.onBackground : colors.primary
                      }
                    />
                  }
                  right={
                    <H2>
                      {data.deviceOnline
                        ? t("deviceIsOnline")
                        : t("deviceIsOffline")}
                    </H2>
                  }
                />
              }
            />
          }
        />
        <Muted>
          {data.deviceOnline
            ? t("protectionActive")
            : t("reconnectingAutomatically")}
        </Muted>
      </Card>
    </Screen>
  );
}