"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DashboardExample = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectDestructuringEmpty"));
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _Container = require("../components/Container");
var _Banner = require("../components/Banner");
var _Padder = require("../components/Padder");
var _Sidebar = require("../components/Sidebar");
var _Flexbox = require("../components/Flexbox");
var _Box = require("../components/Box");
var _Chart = require("../components/Chart");
var _Table = require("../components/Table");
var _Dialog = require("../components/Dialog");
var _Breadcrumb = require("../components/Breadcrumb");
var _reactFeather = require("react-feather");
var DashboardExample = function DashboardExample(_ref) {
  (0, _objectDestructuringEmpty2.default)(_ref);
  var location = (0, _reactRouterDom.useLocation)();
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    open = _useState2[0],
    setOpen = _useState2[1];
  function confirm() {
    setOpen(!open);
  }
  return /*#__PURE__*/_react.default.createElement(_Flexbox.Flexbox, null, /*#__PURE__*/_react.default.createElement(_Sidebar.Sidebar, {
    title: "acme",
    width: 300,
    sectionOne: [{
      active: location.pathname === '/',
      text: 'Dashboard',
      link: '/'
    }, {
      active: location.pathname === '/transactions',
      text: 'Transactions',
      link: '/transactions'
    }, {
      active: location.pathname === '/payments',
      text: 'Payments',
      link: '/payments'
    }],
    sectionTwo: [{
      active: location.pathname === '/documentation',
      text: 'Documentation',
      link: '/documentation'
    }],
    icons: [{
      icon: /*#__PURE__*/_react.default.createElement(_reactFeather.ArrowLeft, {
        width: 28
      }),
      action: function action() {
        return setOpen(true);
      }
    }, {
      icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Settings, {
        width: 28
      }),
      link: '/settings'
    }]
  }), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '70%'
    }
  }, /*#__PURE__*/_react.default.createElement(_Padder.Padder, {
    top: "8rem",
    left: "1em"
  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Routes, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
    path: "/",
    element: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Breadcrumb.Breadcrumb, {
      root: {
        text: 'Dashboard',
        link: '/'
      },
      links: [{
        text: 'Payments',
        link: '/payments'
      }]
    }), /*#__PURE__*/_react.default.createElement("h2", null, "Dashboard"), /*#__PURE__*/_react.default.createElement(_Padder.Padder, {
      top: "1em",
      bottom: "1em"
    }, /*#__PURE__*/_react.default.createElement(_Flexbox.Flexbox, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
      width: 300
    }, /*#__PURE__*/_react.default.createElement("h4", null, "Balance"), /*#__PURE__*/_react.default.createElement("h1", {
      style: {
        color: "#DCDCDC"
      }
    }, "$90000")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
      width: 300
    }, /*#__PURE__*/_react.default.createElement("h4", null, "Growth"), /*#__PURE__*/_react.default.createElement("h1", {
      style: {
        color: "#5BE2A7"
      }
    }, "21%")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
      width: 300
    }, /*#__PURE__*/_react.default.createElement("h4", null, "Costs"), /*#__PURE__*/_react.default.createElement("h1", {
      style: {
        color: "#F95656"
      }
    }, "-16%")))), /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement("label", {
      style: {
        marginBottom: '4em'
      }
    }, "Stats timeline"), /*#__PURE__*/_react.default.createElement(_Chart.Chart, {
      options: {
        height: 350,
        axisX: {
          showGrid: false,
          showLabel: true
        },
        axisY: {
          labelInterpolationFnc: function labelInterpolationFnc(value, index) {
            return index % 2 === 0 ? value : null;
          },
          showGrid: false,
          showLabel: true
        },
        showArea: true,
        showLine: true,
        showPoint: true,
        fullWidth: true,
        fullHeight: true
      },
      data: {
        labels: ['wed', 'thu', 'fri', 'sat', 'sun'],
        series: [{
          className: 'uptrend',
          name: 'return',
          data: [1, 4, 6, 3, 9]
        }, {
          className: 'downtrend',
          name: 'market',
          data: [3, 8, 2, 1, -3]
        }]
      },
      type: "Line"
    })), /*#__PURE__*/_react.default.createElement(_Box.Box, null, /*#__PURE__*/_react.default.createElement("label", {
      style: {
        marginBottom: '4em'
      }
    }, "Balance timeline"), /*#__PURE__*/_react.default.createElement(_Chart.Chart, {
      options: {
        height: 350,
        axisX: {
          showGrid: false,
          showLabel: true
        },
        axisY: {
          labelInterpolationFnc: function labelInterpolationFnc(value, index) {
            return index % 2 === 0 ? value : null;
          },
          showGrid: false,
          showLabel: true
        },
        showArea: true,
        showLine: true,
        showPoint: true,
        fullWidth: true,
        fullHeight: false
      },
      data: {
        labels: ['wed', 'thu', 'fri', 'sat', 'sun'],
        series: [{
          name: 'return',
          data: [10000, 40000, 60000, 30000, 90000]
        }]
      },
      type: "Line"
    })))
  }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
    path: "/transactions",
    element: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", null, "Transactions"), /*#__PURE__*/_react.default.createElement(_Padder.Padder, {
      top: "1em",
      bottom: "1em"
    }, /*#__PURE__*/_react.default.createElement(_Table.Table, {
      width: 800,
      height: 500,
      empty: /*#__PURE__*/_react.default.createElement("label", null, "No data yet"),
      columns: [{
        header: 'Type',
        accessor: 'type',
        index: true
      }, {
        header: 'Payment id',
        accessor: 'paymentId'
      }, {
        header: 'Amount',
        accessor: 'amount'
      }, {
        header: 'Status',
        accessor: 'status'
      }],
      data: [{
        type: 'deposit',
        paymentId: '465aorbb4u0ayd8',
        amount: 1500,
        status: {
          text: 'Pending',
          color: '#FFBD44'
        }
      }, {
        type: 'deposit',
        paymentId: 'yte45259ctebdoa',
        amount: 6500,
        status: {
          text: 'Complete',
          color: '#5BE2A7'
        }
      }, {
        type: 'withdrawal',
        paymentId: 'qdovgh2312bdvudd',
        amount: 3000,
        status: {
          text: 'Cancelled',
          color: '#FF605C'
        }
      }, {
        type: 'deposit',
        paymentId: 'czneiei7w94nvnv',
        amount: 1000,
        status: {
          text: 'Complete',
          color: '#5BE2A7'
        }
      }, {
        type: 'deposit',
        paymentId: 'czneiei7w94nvnv',
        amount: 1000,
        status: {
          text: 'Complete',
          color: '#5BE2A7'
        }
      }, {
        type: 'deposit',
        paymentId: 'czneiei7w94nvnv',
        amount: 1000,
        status: {
          text: 'Complete',
          color: '#5BE2A7'
        }
      }, {
        type: 'deposit',
        paymentId: 'czneiei7w94nvnv',
        amount: 1000,
        status: {
          text: 'Complete',
          color: '#5BE2A7'
        }
      }, {
        type: 'deposit',
        paymentId: 'czneiei7w94nvnv',
        amount: 1000,
        status: {
          text: 'Complete',
          color: '#5BE2A7'
        }
      }, {
        type: 'deposit',
        paymentId: 'czneiei7w94nvnv',
        amount: 1000,
        status: {
          text: 'Complete',
          color: '#5BE2A7'
        }
      }]
    })))
  }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
    path: "/payments",
    element: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", null, "Payments"))
  }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
    path: "/documentation",
    element: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", null, "Documentation"))
  }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
    path: "/settings",
    element: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", null, "Settings"))
  })))), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
    content: /*#__PURE__*/_react.default.createElement("label", null, "Are you sure you want to log out?"),
    title: "Dialog",
    open: open,
    close: function close() {
      setOpen(!open);
    },
    confirm: confirm
  }));
};
exports.DashboardExample = DashboardExample;