"use strict";

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

var _react = _interopRequireDefault(require("react"));

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

var _Topology = require("../../../components/Topology");

var _jsxRuntime = require("react/jsx-runtime");

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

var TopologyView = function TopologyView(_ref) {
  var topology = _ref.topology,
      checked = _ref.checked,
      selectionMode = _ref.selectionMode,
      setSelectionMode = _ref.setSelectionMode,
      toggleChecked = _ref.toggleChecked;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "font-inter flex leading-1.21rel",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "flex-auto",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "text-2xl my-6 font-semibold",
        children: "Title"
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "form-check mb-4",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          id: "ch1",
          type: "checkbox",
          className: "h-4 w-4 text-dark-blue rounded-4px",
          checked: selectionMode,
          onChange: function onChange(event) {
            setSelectionMode(event.target.checked ? "select" : null);
          }
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
          className: "form-check-label inline-block ml-4",
          htmlFor: "ch1",
          children: "Selection Mode"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "grid gap-4",
        style: {
          gridTemplateColumns: "repeat(2, 384px)"
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyColumn, {
            title: "zone 1",
            cards: topology.map(function (item, index) {
              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyCard, {
                size: "small",
                topology: item,
                selectionMode: selectionMode,
                selected: !!checked["column_1_card_".concat(index)],
                onSelectionChange: function onSelectionChange(state) {
                  toggleChecked("column_1_card_".concat(index), state);
                }
              }, item.id);
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyColumn, {
            title: "zone 2",
            cards: topology.map(function (item, index) {
              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyCard, {
                size: "medium",
                topology: item,
                selectionMode: selectionMode,
                selected: !!checked["column_2_card_".concat(index)],
                onSelectionChange: function onSelectionChange(state) {
                  toggleChecked("column_2_card_".concat(index), state);
                }
              }, item.id);
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyColumn, {
            title: "zone 3",
            cards: topology.map(function (item, index) {
              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyCard, {
                size: "large",
                topology: item,
                selectionMode: selectionMode,
                selected: !!checked["column_3_card_".concat(index)],
                onSelectionChange: function onSelectionChange(state) {
                  toggleChecked("column_3_card_".concat(index), state);
                }
              }, item.id);
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyColumn, {
            title: "zone 4",
            cards: topology.map(function (item, index) {
              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topology.TopologyCard, {
                size: "extra-large",
                topology: item,
                selectionMode: selectionMode,
                selected: !!checked["column_3_card_".concat(index)],
                onSelectionChange: function onSelectionChange(state) {
                  toggleChecked("column_3_card_".concat(index), state);
                }
              }, item.id);
            })
          })
        })]
      })]
    })
  });
};

exports.TopologyView = TopologyView;
TopologyView.propTypes = {
  topology: _propTypes.default.arrayOf(_propTypes.default.shape({})).isRequired
};