import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Header from "../Header";
import Button from "@material-ui/core/Button";
import templates from "./templates";
import * as colors from "@material-ui/core/colors";
import { useDropzone } from "react-dropzone";
import CreateFromTemplateDialog from "../CreateFromTemplateDialog";
import AddAuthFromTemplateDialog from "../AddAuthFromTemplateDialog";
import { styled } from "@material-ui/core/styles";
import usePosthog from "../../hooks/use-posthog";
import packageInfo from "../../../package.json";
import useEventCallback from "use-event-callback";
import DownloadIcon from "@material-ui/icons/GetApp";
import Box from "@material-ui/core/Box";
import Select from "react-select";
import { useTranslation } from "react-i18next";
import getEmbedYoutubeUrl from "./get-embed-youtube-url.js";
var useStyles = makeStyles(function (theme) {
  return {
    container: {
      display: "flex",
      flexDirection: "column",
      backgroundColor: colors.grey[900],
      height: "100vh"
    },
    headerButton: {
      fontSize: 12,
      backgroundColor: "#fff"
    },
    downloadIcon: {
      marginTop: 2,
      width: 18,
      height: 18,
      marginRight: 4,
      marginLeft: -6,
      color: colors.grey[700]
    },
    languageSelectionWrapper: {
      display: "flex",
      flexDirection: "column",
      textAlign: "center"
    },
    languageSelectionBox: _defineProperty({
      display: "flex",
      paddingTop: 24
    }, theme.breakpoints.up("sm"), {
      justifyContent: "flex-end"
    })
  };
});
var ContentContainer = styled("div")(function (_ref) {
  var theme = _ref.theme;
  return _defineProperty({
    display: "flex",
    justifyContent: "center",
    flexGrow: 1,
    color: "#fff",
    overflowY: "scroll",
    padding: 100
  }, theme.breakpoints.down("sm"), {
    padding: 50
  });
});
var Content = styled("div")(function (_ref3) {
  var theme = _ref3.theme;
  return {
    display: "flex",
    flexDirection: "column",
    width: "calc(100% - 32px)",
    marginLeft: 16,
    maxWidth: 1000
  };
});
var Title = styled("div")({
  marginTop: 20,
  fontSize: 36,
  fontWeight: 600,
  color: colors.grey[300]
});
var languageSelectionFormStyle = {
  control: function control(base, state) {
    return _objectSpread(_objectSpread({}, base), {}, {
      border: "1px solid #9e9e9e",
      background: "transparent",
      color: "#e0e0e0"
    });
  },
  menuList: function menuList(base) {
    return _objectSpread(_objectSpread({}, base), {}, {
      padding: 0,
      margin: 0,
      color: "black"
    });
  },
  singleValue: function singleValue(base) {
    return _objectSpread(_objectSpread({}, base), {}, {
      color: "white"
    });
  }
};
var Subtitle = styled("div")({
  fontSize: 18,
  // fontWeight: "bold",
  marginTop: 8,
  color: colors.grey[500]
});
var ActionList = styled("div")({
  marginTop: 48
});
var Action = styled("a")({
  display: "block",
  color: colors.blue[500],
  marginTop: 4,
  cursor: "pointer",
  textDecoration: "none"
});
var ActionTitle = styled("div")({
  // fontWeight: "bold",
  fontSize: 24,
  marginBottom: 8,
  color: colors.grey[500]
});
var ActionText = styled("div")({
  color: colors.grey[300],
  "& a": {
    cursor: "pointer",
    color: colors.blue[500],
    textDecoration: "none"
  }
});
var Actionless = styled("div")({
  color: colors.grey[600],
  paddingTop: 16
});
var BottomSpacer = styled("div")({
  height: 100
});
var languageOptions = [{
  label: "English",
  value: "en"
}, {
  label: "French",
  value: "fr"
}, {
  label: "Chinese",
  value: "cn"
}, {
  label: "Portuguese",
  value: "pt"
}, {
  label: "Dutch",
  value: "nl"
}];
export default (function (_ref4) {
  var onFileDrop = _ref4.onFileDrop,
      onOpenTemplate = _ref4.onOpenTemplate,
      _ref4$showDownloadLin = _ref4.showDownloadLink,
      showDownloadLink = _ref4$showDownloadLin === void 0 ? true : _ref4$showDownloadLin,
      _ref4$recentItems = _ref4.recentItems,
      recentItems = _ref4$recentItems === void 0 ? [] : _ref4$recentItems,
      onOpenRecentItem = _ref4.onOpenRecentItem,
      onClickOpenSession = _ref4.onClickOpenSession;
  var c = useStyles();
  var posthog = usePosthog(); // internalization hook

  var _useTranslation = useTranslation(),
      t = _useTranslation.t,
      i18n = _useTranslation.i18n; //const isDesktop = useIsDesktop()


  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      newVersionAvailable = _useState2[0],
      changeNewVersionAvailable = _useState2[1];

  useEffect(function () {
    // if (!isDesktop) return
    function checkNewVersion() {
      return _checkNewVersion.apply(this, arguments);
    }

    function _checkNewVersion() {
      _checkNewVersion = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var newPackage;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return fetch("https://raw.githubusercontent.com/UniversalDataTool/universal-data-tool/master/package.json").then(function (r) {
                  return r.json();
                });

              case 2:
                newPackage = _context.sent;

                if (newPackage.version !== packageInfo.version) {
                  changeNewVersionAvailable(newPackage.version);
                }

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
      return _checkNewVersion.apply(this, arguments);
    }

    checkNewVersion();
  }, []);

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      latestCommunityUpdate = _useState4[0],
      setLatestCommunityUpdate = _useState4[1];

  useEffect(function () {
    function getLatestREADME() {
      return _getLatestREADME.apply(this, arguments);
    }

    function _getLatestREADME() {
      _getLatestREADME = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        var readme, startCU, endCU, communityUpdates, latestYtLink;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _context2.next = 2;
                return fetch("https://raw.githubusercontent.com/UniversalDataTool/universal-data-tool/master/README.md").then(function (r) {
                  return r.text();
                });

              case 2:
                readme = _context2.sent;
                startCU = readme.search("COMMUNITY-UPDATE:START");
                endCU = readme.search("COMMUNITY-UPDATE:END");
                communityUpdates = readme.slice(startCU, endCU).split("\n").slice(1, -1).filter(function (line) {
                  return line.trim() !== "";
                });
                latestYtLink = communityUpdates[0].match(/\((.*)\)/)[1];
                setLatestCommunityUpdate({
                  name: communityUpdates[0].match(/\[(.*)\]/)[1],
                  ytLink: latestYtLink,
                  embedYTLink: getEmbedYoutubeUrl(latestYtLink)
                });

              case 8:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }));
      return _getLatestREADME.apply(this, arguments);
    }

    getLatestREADME();
  }, []);

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      createFromTemplateDialogOpen = _useState6[0],
      changeCreateFromTemplateDialogOpen = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      addAuthFromDialogOpen = _useState8[0],
      changeAddAuthFromDialogOpen = _useState8[1];

  var onDrop = useEventCallback(function (acceptedFiles) {
    onFileDrop(acceptedFiles[0]);
  });

  var changeLanguage = function changeLanguage(language) {
    i18n.changeLanguage(language);
  };

  var _useDropzone = useDropzone({
    onDrop: onDrop
  }),
      getRootProps = _useDropzone.getRootProps,
      getInputProps = _useDropzone.getInputProps;

  return /*#__PURE__*/React.createElement("div", {
    className: c.container
  }, /*#__PURE__*/React.createElement(CreateFromTemplateDialog, {
    open: createFromTemplateDialogOpen,
    onSelect: function onSelect(template) {
      posthog.capture("template_clicked", {
        clicked_template: template.name
      });
      onOpenTemplate(template);
    },
    onClose: function onClose() {
      return changeCreateFromTemplateDialogOpen(false);
    }
  }), /*#__PURE__*/React.createElement(AddAuthFromTemplateDialog, {
    open: addAuthFromDialogOpen,
    onSelect: function onSelect(template) {
      return onOpenTemplate(template);
    },
    onClose: function onClose() {
      return changeAddAuthFromDialogOpen(false);
    }
  }), /*#__PURE__*/React.createElement(Header, {
    additionalButtons: [newVersionAvailable && /*#__PURE__*/React.createElement(Button, {
      variant: "outlined",
      key: "download-latest",
      className: c.headerButton,
      href: "https://github.com/OpenHumanAnnotation/universal-data-tool/releases"
    }, /*#__PURE__*/React.createElement(DownloadIcon, {
      className: c.downloadIcon
    }), t("Download Version"), " v", newVersionAvailable), !newVersionAvailable && showDownloadLink && /*#__PURE__*/React.createElement(Button, {
      variant: "outlined",
      key: "download",
      href: "https://github.com/OpenHumanAnnotation/universal-data-tool/releases",
      className: c.headerButton
    }, /*#__PURE__*/React.createElement(DownloadIcon, {
      className: c.downloadIcon
    }), t("download"))].filter(Boolean)
  }), /*#__PURE__*/React.createElement(ContentContainer, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Grid, {
    container: true
  }, /*#__PURE__*/React.createElement(Grid, {
    xs: 12,
    sm: 6,
    item: true
  }, /*#__PURE__*/React.createElement(Title, null, "Universal Data Tool"), /*#__PURE__*/React.createElement(Subtitle, null, t("universaldatatool-description"))), /*#__PURE__*/React.createElement(Grid, {
    xs: 12,
    sm: 6,
    item: true
  }, /*#__PURE__*/React.createElement(Box, {
    className: c.languageSelectionBox
  }, /*#__PURE__*/React.createElement(Box, {
    width: "100%",
    maxWidth: 200,
    className: c.languageSelectionWrapper
  }, /*#__PURE__*/React.createElement(Select, {
    id: "language-list",
    styles: languageSelectionFormStyle,
    defaultValue: languageOptions.filter(function (lang) {
      return lang.value === i18n.language;
    }),
    options: languageOptions,
    onChange: function onChange(_ref5) {
      var value = _ref5.value;
      return changeLanguage(value);
    }
  })))), /*#__PURE__*/React.createElement(Grid, {
    xs: 12,
    sm: 6,
    item: true
  }, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionTitle, null, t("start")), /*#__PURE__*/React.createElement(Action, {
    onClick: function onClick() {
      posthog.capture("template_clicked", {
        clicked_template: "empty"
      });
      onOpenTemplate(templates.find(function (t) {
        return t.name === "Empty";
      }));
    }
  }, t("new-file")), /*#__PURE__*/React.createElement(Action, {
    onClick: function onClick() {
      return changeCreateFromTemplateDialogOpen(true);
    }
  }, t("start-from-template")), /*#__PURE__*/React.createElement(Action, getRootProps(), /*#__PURE__*/React.createElement("input", getInputProps()), t("open-file")), onClickOpenSession && /*#__PURE__*/React.createElement(Action, {
    onClick: onClickOpenSession
  }, t("open-collaborative-session")), /*#__PURE__*/React.createElement(Action, {
    onClick: function onClick() {
      return changeAddAuthFromDialogOpen(true);
    }
  }, t("add-authentication")), /*#__PURE__*/React.createElement(Action, {
    onClick: function onClick() {
      window.location.href = "https://universaldatatool.com/courses";
    }
  }, t("create-training-course"))), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionTitle, null, t("recent")), recentItems.length === 0 ? /*#__PURE__*/React.createElement(Actionless, null, t("no-recent-files")) : recentItems.map(function (ri, i) {
    return /*#__PURE__*/React.createElement(Action, {
      key: i,
      onClick: function onClick() {
        return onOpenRecentItem(ri);
      }
    }, ri.fileName);
  })), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionTitle, null, t("help")), /*#__PURE__*/React.createElement(Action, {
    href: "https://github.com/UniversalDataTool/universal-data-tool/releases"
  }, t("downloading-and-installing-udt")), /*#__PURE__*/React.createElement(Action, {
    href: "https://dev.to/seveibar/make-bounding-boxes-for-artificial-intelligence-with-udt-1kai"
  }, t("labeling-images")), /*#__PURE__*/React.createElement(Action, {
    href: "https://github.com/UniversalDataTool/universal-data-tool"
  }, t("github-repository")), /*#__PURE__*/React.createElement(Action, {
    href: "https://www.youtube.com/channel/UCgFkrRN7CLt7_iTa2WDjf2g"
  }, t("youtube-channel")))), /*#__PURE__*/React.createElement(Grid, {
    xs: 12,
    sm: 6,
    item: true
  }, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionTitle, null, t("about")), /*#__PURE__*/React.createElement(ActionText, null, t("start-page-about-first-paragraph"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), t("start-page-about-second-paragraph"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), t("the-udt-uses-an"), " ", /*#__PURE__*/React.createElement("a", {
    href: "https://github.com/UniversalDataTool/udt-format"
  }, "open-source data format (.udt.json / .udt.csv)"), " ", t("start-page-about-third-paragraph"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null))), /*#__PURE__*/React.createElement(ActionList, null, latestCommunityUpdate && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionTitle, null, latestCommunityUpdate.name), /*#__PURE__*/React.createElement("iframe", {
    title: latestCommunityUpdate.name,
    width: "320",
    height: "178" // src="https://www.youtube.com/embed/QW-s4XVK3Ok"
    ,
    src: latestCommunityUpdate.embedYTLink,
    frameBorder: "0",
    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
    allowFullScreen: true
  })))), /*#__PURE__*/React.createElement(Grid, {
    xs: 12,
    sm: 6,
    item: true
  }, /*#__PURE__*/React.createElement(BottomSpacer, null))))));
});