"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _core = require("@emotion/core");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@material-ui/core/styles");

var _Card = _interopRequireDefault(require("@material-ui/core/Card"));

var _CardActions = _interopRequireDefault(require("@material-ui/core/CardActions"));

var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));

var _reactRouter = require("react-router");

var _lodash = require("lodash");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n          padding: 0 0.9375rem 0 1.6875rem;\n        "]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  font-family: Rubik, Helvetica Neue, Helvetica, sans-serif;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  line-height: 1.75;\n  padding: 0.307692308em 0.615384615em;\n  text-transform: uppercase;\n  transition: background-color 63ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    box-shadow 63ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    border 63ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  z-index: 2;\n  &:hover {\n    background-color: rgba(32, 16, 36, 0.08);\n    cursor: pointer;\n  }\n"]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  width: 5vw;\n  min-width: 67px;\n  max-width: 134px;\n  height: 5vw;\n  min-height: 67px;\n  max-height: 134px;\n"]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 0;\n  text-align: left;\n"]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: unset;\n  &::before {\n    bottom: 0;\n    content: \"\";\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n  &:focus-visible {\n    outline: 2px solid hsl(300, 5%, 55%);\n  }\n  &:-moz-focusring {\n    outline: 2px solid hsl(300, 5%, 55%);\n  }\n  &:hover {\n    color: currentColor;\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  &:focus-within {\n    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2),\n      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 4px 2px -1px rgba(0, 0, 0, 0.12);\n    outline: 1px solid transparent; /* needed for Windows high-contrast mode */\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) } })); }

var projectContentContainer = (0, _core.css)(_templateObject());
var cardHeadlineLink = (0, _core.css)(_templateObject2());
var watermarkContainer = (0, _core.css)(_templateObject3());
var scaleCorner = (0, _core.css)(_templateObject4());
var nonInteractiveCta = (0, _core.css)(_templateObject5());
var useProjectStyles = (0, _styles.makeStyles)({
  card: {
    "&:hover": {
      boxShadow: "0px 2px 6px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 4px 2px -1px rgba(0,0,0,0.12)"
    }
  }
});

var Watermark = function Watermark() {
  return (0, _core.jsx)("div", {
    css: watermarkContainer
  }, (0, _core.jsx)("svg", {
    "aria-hidden": "true",
    css: scaleCorner
  }, (0, _core.jsx)("g", {
    fill: "none",
    fillRule: "evenodd"
  }, (0, _core.jsx)("path", {
    d: "M0 134.658V0l11.566 11.597v123.061H0z",
    fill: "#191119"
  }), (0, _core.jsx)("path", {
    d: "M133.864 0v11.597H11.566v.008L0 .008V0h133.864z",
    fill: "#DC4556"
  }))));
};

var types = {
  collection: {
    action: "View collection"
  },
  application: {
    action: "Check it out!"
  }
};

var ProjectCard = function ProjectCard(_ref) {
  var title = _ref.title,
      description = _ref.description,
      link = _ref.link,
      type = _ref.type;
  var classes = useProjectStyles();
  return (0, _core.jsx)(_Card["default"], {
    css: projectContentContainer,
    className: classes.card
  }, (0, _core.jsx)(Watermark, null), (0, _core.jsx)("div", {
    css: (0, _core.css)(_templateObject6())
  }, (0, _core.jsx)(_CardContent["default"], null, (0, _core.jsx)("h2", null, (0, _core.jsx)(_reactRouter.Link, {
    css: cardHeadlineLink,
    to: link
  }, (0, _lodash.startCase)(type), ": ", title)), (0, _core.jsx)("p", null, description)), (0, _core.jsx)(_CardActions["default"], null, (0, _core.jsx)("span", {
    css: nonInteractiveCta
  }, types[type].action))));
};

ProjectCard.propTypes = {
  title: _propTypes["default"].string,
  description: _propTypes["default"].string,
  link: _propTypes["default"].string,
  type: _propTypes["default"].oneOf(["collection", "application"])
};
var _default = ProjectCard;
exports["default"] = _default;