"use strict";

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

var _preact = require("preact");

var _2 = require("../");

var _section = _interopRequireDefault(require("./section"));

var _componentCode = _interopRequireDefault(require("./component-code"));

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

class DrugBoxSection extends _preact.Component {
  constructor(props) {
    super(props);
    this.state = {
      flipped: false
    };
  }

  render(_, {
    flipped
  }) {
    return (0, _preact.h)(_section.default, {
      title: "DrugBox"
    }, (0, _preact.h)(_componentCode.default, {
      name: "DrugBox FlipContainer",
      code: "<FlipContainer\n  direction=\"horizontal\"\n  perspective=\"2000px\"\n  front={\n    <DrugBox style={{ width: '200px' }}>\n      <div>\n        <p>Hi front</p>\n        <p>Stuff</p>\n        <p>Stuff</p>\n        <p>Stuff</p>\n        <p>Stuff</p>\n        <p>Stuff</p>\n        <p>Stuff</p>\n        <p>Stuff</p>\n      </div>\n    </DrugBox>\n  }\n  back={\n    <DrugBox style={{ width: '200px', height: '100%' }}>\n      <p>Hi back</p>\n      <p>Stuff</p>\n      <p>Stuff</p>\n      <p>Stuff</p>\n    </DrugBox>\n  }\n  width=\"200px\"\n  flipped={flipped}\n/>"
    }, (0, _preact.h)("button", {
      onClick: () => this.setState({
        flipped: !flipped
      })
    }, "flip"), (0, _preact.h)("div", {
      className: "flex justify-between"
    }, (0, _preact.h)(_2.FlipContainer, {
      "data-e2e": "flipcontainer",
      className: "bg-blue",
      direction: "horizontal",
      perspective: "2000px",
      front: (0, _preact.h)(_2.DrugBox, null, (0, _preact.h)("div", null, (0, _preact.h)("p", null, "Hi front"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"))),
      back: (0, _preact.h)(_2.DrugBox, {
        style: {
          height: '100%'
        }
      }, (0, _preact.h)("p", null, "Hi back"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff")),
      width: "calc(33% - 8px)",
      flipped: flipped
    }), (0, _preact.h)(_2.FlipContainer, {
      direction: "horizontal",
      perspective: "2000px",
      front: (0, _preact.h)(_2.DrugBox, null, (0, _preact.h)("div", null, (0, _preact.h)("p", null, "Hi front"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"))),
      back: (0, _preact.h)(_2.DrugBox, {
        style: {
          height: '100%'
        }
      }, (0, _preact.h)("p", null, "Hi back"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff")),
      width: "calc(33% - 8px)",
      flipped: flipped
    }), (0, _preact.h)(_2.FlipContainer, {
      "data-e2e": "flipcontainer",
      direction: "horizontal",
      perspective: "2000px",
      is3D: false,
      front: (0, _preact.h)(_2.DrugBox, null, (0, _preact.h)("div", null, (0, _preact.h)("p", null, "Non 3D front"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"))),
      back: (0, _preact.h)(_2.DrugBox, {
        style: {
          height: '100%'
        }
      }, (0, _preact.h)("p", null, "Non 3D back"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff"), (0, _preact.h)("p", null, "Stuff")),
      width: "calc(33% - 8px)",
      flipped: flipped
    }))));
  }

}

exports.DrugBoxSection = DrugBoxSection;