import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

import React, { useState } from "react";
import Typography from "../Typography";
import Link from "../Link";
import Collapse from "../Collapse";
import Grid from "../CssGrid";
import CollapseTrigger from "../CollapseTrigger";
import Plus from "../Icon/Plus";
import Button from "../next/Button";
import styled from "../styles/styled";
import GoogleAdsCircle from "../BrandIcon/GoogleAdsCircle";
import GoogleAnalyticsCircle from "../BrandIcon/GoogleAnalyticsCircle";
import MicrosoftCircle from "../BrandIcon/MicrosoftCircle";
import FacebookCircle from "../BrandIcon/FacebookCircle";
import InstagramCircle from "../BrandIcon/InstagramCircle";
import TiktokCircle from "../BrandIcon/TiktokCircle";
import TwitterCircle from "../BrandIcon/TwitterCircle";
import Account from "./Account";
import GoogleMerchantCircle from "../BrandIcon/GoogleMerchantCircle";
import CssFlex from "../CssFlex";
import ExclamationTriangle from "../Icon/ExclamationTriangle";
var CHANNELS_ICON = {
  google: GoogleAdsCircle,
  microsoft: MicrosoftCircle,
  tiktok: TiktokCircle,
  facebook: FacebookCircle,
  instagram: InstagramCircle,
  twitter: TwitterCircle,
  google_analytics: GoogleAnalyticsCircle,
  google_merchant: GoogleMerchantCircle
};
var CHANNELS_TITLE = {
  google: "Google Ads",
  microsoft: "Microsoft Ads",
  tiktok: "TikTok Ads",
  facebook: "Facebook Ads",
  instagram: "Instagram Ads",
  twitter: "Twitter Ads",
  google_analytics: "Google Analytics",
  google_merchant: "Google Merchant"
};

function PlatformAccounts(_ref) {
  var channel = _ref.channel,
      _ref$accounts = _ref.accounts,
      accounts = _ref$accounts === void 0 ? [] : _ref$accounts,
      connectedEmail = _ref.connectedEmail,
      onAddAccount = _ref.onAddAccount,
      onAddSubAccount = _ref.onAddSubAccount,
      onLogin = _ref.onLogin,
      onLink = _ref.onLink,
      onSelect = _ref.onSelect,
      texts = _ref.texts,
      _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      _ref$initialOpen = _ref.initialOpen,
      initialOpen = _ref$initialOpen === void 0 ? false : _ref$initialOpen;

  var _useState = useState(initialOpen),
      _useState2 = _slicedToArray(_useState, 2),
      isOpenAccounts = _useState2[0],
      setIsOpenAccounts = _useState2[1];

  var Icon = CHANNELS_ICON[channel];
  var title = connectedEmail || CHANNELS_TITLE[channel];

  if (!connectedEmail) {
    return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(Icon, {
      size: 32,
      "aria-hidden": true
    }), /*#__PURE__*/React.createElement(StyledTypography, {
      shade: 800,
      variant: "title2",
      title: title
    }, title), /*#__PURE__*/React.createElement(StyledButton, {
      onClick: onLogin,
      isLoading: isLoading,
      disabled: isLoading
    }, texts.connect));
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(Icon, {
    size: 32,
    "aria-hidden": true
  }), /*#__PURE__*/React.createElement(StyledTypography, {
    shade: 800,
    variant: "title2",
    title: title
  }, title), /*#__PURE__*/React.createElement(StyledButton, {
    onClick: onLogin,
    isLoading: isLoading,
    disabled: isLoading
  }, texts.changeAccount), /*#__PURE__*/React.createElement(CollapseTrigger, {
    open: isOpenAccounts,
    onClick: function onClick() {
      return setIsOpenAccounts(!isOpenAccounts);
    }
  })), accounts.length === 0 && texts.noAccounts && /*#__PURE__*/React.createElement(CssFlex, {
    ml: "40px",
    gap: "sm",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(ExclamationTriangle, {
    size: 24,
    color: "warning"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "smallItalic",
    color: "warning",
    weight: "semibold"
  }, texts.noAccounts)), /*#__PURE__*/React.createElement(Collapse, {
    open: isOpenAccounts
  }, /*#__PURE__*/React.createElement(StyledGrid // @ts-ignore
  , {
    gap: "md",
    py: "md",
    maxHeight: "225px",
    overflowY: "auto",
    boxSizing: "border-box"
  }, onAddAccount &&
  /*#__PURE__*/
  // @ts-ignore
  React.createElement(StyledLink, {
    onClick: onAddAccount
  }, /*#__PURE__*/React.createElement(StyledPlus, {
    size: 16,
    color: "primary"
  }), texts.addAccount), accounts.map(function (account) {
    return /*#__PURE__*/React.createElement(Account, {
      key: account.id,
      channel: channel,
      onLink: onLink,
      onSelect: onSelect,
      onAddSubAccount: onAddSubAccount,
      texts: texts,
      account: account
    });
  })))));
}

var StyledImg = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-height: 200px;\n  width: auto;\n"])));
var Root = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 32px 1fr auto auto;\n  align-items: center;\n  gap: 8px;\n"])));
var StyledTypography = styled(Typography)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: left;\n"])));
var StyledGrid = styled(Grid)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &::-webkit-scrollbar {\n    width: 12px;\n    background-color: #fff;\n  }\n  &::-webkit-scrollbar-track {\n    background-color: #fff;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: #babac0;\n    border-radius: 16px;\n    border: 4px solid #fff;\n  }\n"])));
var StyledLink = styled(Link)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  font-family: ", ";\n\n  font-size: 1rem;\n"])), function (props) {
  return props.theme.spaces["2xl"];
}, function (props) {
  return props.theme.typography.font1;
});
var StyledPlus = styled(Plus)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n"])), function (props) {
  return props.theme.spaces.sm;
});
var StyledButton = styled(Button)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-radius: 999px;\n  min-height: 36px;\n  padding-top: 4px;\n  padding-bottom: 4px;\n"])));
export default PlatformAccounts;