function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _templateObject12() {
  var data = _taggedTemplateLiteral(["\n  width: 90%;\n  overflow-y: hidden;\n  padding-left: 5%;\n"]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  border: 1px solid lightGray;\n  background-color: #f0f0f0;\n  color: #dc4556;\n  font-size: 20px;\n  height: 98%;\n  width: 50%;\n  margin: 0 auto;\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  border: 1px solid lightGray;\n  background-color: #f0f0f0;\n  color: dimGray;\n  font-size: 20px;\n  height: 98%;\n  width: 50%;\n  margin: 0 auto;\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 40px;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: -1px;\n  top: -1px;\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  flex: 1;\n  margin 1% auto;\n  font-size: 20px;\n  text-align: center;\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  font-size: 17px;\n  flex: 3;\n  margin auto 20px;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n  color: #1e62bd;\n  z-index: 4;\n  opacity: 0.9;\n  box-shadow: 5px 5px 15px -3px rgba(0, 0, 0, 0.2);\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  height: 0;\n  opacity: 0;\n  transition: height 750ms ease-out, opacity 0s linear;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  height: 400px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  opacity: 0.9;\n  transition: height 750ms ease-out, opacity 1.5s ease-in;\n  @media (max-width: 500px) {\n    height: 265px;\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 50px;\n  left: 25px;\n  display: flex;\n  flex-direction: column;\n  width: 575px;\n  background: rgba(243, 242, 243, 0.9);\n  color: rgb(85, 85, 85);\n  box-shadow: 5px 5px 15px -3px rgba(0, 0, 0, 0.2);\n  @media (max-width: 900px) {\n    width: 90%;\n    bottom: 30px;\n    left: 8%;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React, { useState } from "react";
import { bool, func, node, number, shape, string } from "prop-types";
import { jsx, css } from "@emotion/core";
import { isEqual } from "lodash";
import { LineChart, civicFormat, Placeholder, VisualizationColors, PolygonPreview } from "..";
import { ICONS } from "../styleConstants";
var container = css(_templateObject());
var dashboardOpen = css(_templateObject2());
var dashboardClosed = css(_templateObject3());
var contentContainer = css(_templateObject4());
var toggleContainer = css(_templateObject5());
var toggleTitle = css(_templateObject6());
var toggleArrow = css(_templateObject7());
var watermarkContainer = css(_templateObject8());
var buttonContainer = css(_templateObject9());
var icon = css(_templateObject10());
var iconActive = css(_templateObject11());
var viz = css(_templateObject12());

var createLineViz = function createLineViz(data, title, xLabel, yLabel, xFormat, yFormat, id, feature) {
  var yForm = yFormat === "percent" ? "percentage" : yFormat;
  return jsx("div", {
    css: viz,
    key: id
  }, jsx("h3", null, jsx(PolygonPreview, {
    feature: feature,
    stroke: VisualizationColors.categorical.pink.hex,
    strokeWidth: 30,
    svgCss: css("height: 2.25rem;"),
    padding: 45
  }), title), jsx(LineChart, {
    data: data,
    xLabel: xLabel,
    yLabel: "".concat(yLabel.slice(0, 1).toUpperCase()).concat(yLabel.slice(1)),
    xNumberFormatter: function xNumberFormatter(x) {
      return civicFormat[xFormat](x);
    },
    yNumberFormatter: function yNumberFormatter(y) {
      return civicFormat[yForm](y);
    }
  }));
};

var placeholder = jsx("div", {
  css: viz
}, jsx(Placeholder, null, "Select a region on the map for more detail"));

var CivicDashboard = function CivicDashboard(props) {
  var data = props.data,
      children = props.children,
      isDashboardOpen = props.isDashboardOpen,
      _onClick = props.onClick,
      standalone = props.standalone;

  var _useState = useState("visualizations"),
      _useState2 = _slicedToArray(_useState, 2),
      display = _useState2[0],
      setDisplay = _useState2[1];

  var createVisualizations = data && data.featureProperties ? Object.entries(data.featureProperties).filter(function (c) {
    var colorFieldName = data.colorKey;
    var a = c[0].match(/^[a-zA-Z]+/);
    var b = colorFieldName.match(/^[a-zA-Z]+/);
    return a[0] === b[0];
  }) : [];
  var censusYears3 = [1990, 2000, 2010];
  var censusYears4 = [1990, 2000, 2010, 2017];
  var isYear = createVisualizations[0] && createVisualizations[0][0] && createVisualizations[0][0].search(/[0-9]/) > -1;
  var lineData = createVisualizations.length === 3 && isYear ? createVisualizations.map(function (d, i) {
    var yFormatType = data.primaryFormat;
    return {
      x: censusYears3[i],
      y: d[1] && yFormatType !== "percent" ? d[1] : d[1] && yFormatType === "percent" ? d[1] / 100 : 0
    };
  }) : createVisualizations.length === 4 && isYear ? createVisualizations.map(function (d, i) {
    var yFormatType = data.primaryFormat;
    return {
      x: censusYears4[i],
      y: d[1] && yFormatType !== "percent" ? d[1] : d[1] && yFormatType === "percent" ? d[1] / 100 : 0
    };
  }) : [];
  var visualizations = createVisualizations.length && lineData.length ? createLineViz(lineData, data.displayName, "Year", data.primaryFormat, "year", data.primaryFormat, data.id, data.feature) : placeholder;
  var civicWatermark = jsx("div", {
    css: watermarkContainer
  }, jsx("svg", {
    width: "134",
    height: "135",
    xmlns: "http://www.w3.org/2000/svg"
  }, jsx("g", {
    fill: "none",
    fillRule: "evenodd"
  }, jsx("path", {
    d: "M0 134.658V0l11.566 11.597v123.061H0z",
    fill: "#191119"
  }), jsx("path", {
    d: "M133.864 0v11.597H11.566v.008L0 .008V0h133.864z",
    fill: "#DC4556"
  }))));
  var visualizationButtons = jsx("div", {
    css: buttonContainer
  }, jsx("div", {
    css: display === "description" ? iconActive : icon,
    onClick: function onClick() {
      return setDisplay("description");
    },
    onKeyPress: function onKeyPress() {
      return setDisplay("description");
    },
    tabIndex: 0,
    role: "button"
  }, jsx("div", {
    className: ICONS.info
  })), jsx("div", {
    css: display === "visualizations" ? iconActive : icon,
    onClick: function onClick() {
      return setDisplay("visualizations");
    },
    onKeyPress: function onKeyPress() {
      return setDisplay("visualizations");
    },
    tabIndex: 0,
    role: "button"
  }, jsx("div", {
    className: ICONS.eye
  })));
  var dashboardToggleButton = jsx("div", {
    css: toggleContainer,
    onClick: function onClick() {
      return _onClick();
    },
    onKeyPress: function onKeyPress() {
      return _onClick();
    },
    tabIndex: 0,
    role: "button"
  }, jsx("div", {
    css: toggleTitle
  }, isDashboardOpen ? "" : "Please select a polygon"), jsx("div", {
    css: toggleArrow
  }, jsx("div", {
    className: isDashboardOpen ? ICONS.arrowDown : ICONS.arrowUp
  })));
  return standalone ? jsx("div", null, jsx("div", {
    css: contentContainer
  }, display === "description" ? children : visualizations), children ? visualizationButtons : null) : jsx("div", {
    css: container
  }, jsx("div", {
    css: isDashboardOpen ? dashboardOpen : dashboardClosed
  }, jsx("div", {
    css: contentContainer
  }, display === "description" ? children : visualizations), civicWatermark, children ? visualizationButtons : null), dashboardToggleButton);
};

CivicDashboard.propTypes = {
  data: shape({
    id: number,
    displayName: string,
    feature: shape({}),
    featureProperties: shape({}),
    colorKey: string,
    primaryFormat: string
  }),
  children: node,
  isDashboardOpen: bool,
  onClick: func,
  standalone: bool
};
CivicDashboard.defaultProps = {
  standalone: false
};

function arePropsEqual(prevProps, nextProps) {
  var prevData = prevProps.data,
      prevChildren = prevProps.children,
      prevIsDashboardOpen = prevProps.isDashboardOpen,
      prevOnClick = prevProps.onClick;
  var data = nextProps.data,
      children = nextProps.children,
      isDashboardOpen = nextProps.isDashboardOpen,
      onClick = nextProps.onClick;
  return isEqual(prevData, data) && prevChildren === children && prevIsDashboardOpen === isDashboardOpen && prevOnClick === onClick;
}

export default React.memo(CivicDashboard, arePropsEqual);