import React from 'react';
import { Flag, Table, Tbody, Td, Tfoot, Th, Thead, Tr, Typography } from '../..';
import { data } from './Table.stories.data';
var tableData = [];
for (var i = 0; i < 5; i += 1) {
  tableData = tableData.concat(data);
}
export default {
  title: 'Atoms / Table'
};
export var DefaultStory = {
  render: function render() {
    var _tableData;
    return React.createElement(Table, {
      width: "100%"
    }, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, null, "Symbol"), React.createElement(Th, null, "Name"))), React.createElement(Tbody, null, (_tableData = tableData) === null || _tableData === void 0 ? void 0 : _tableData.map(function (instrument, index) {
      return React.createElement(Tr, {
        key: "".concat(instrument[0], "_").concat(index)
      }, React.createElement(Td, null, instrument[1]), React.createElement(Td, null, instrument[2]));
    })), React.createElement(Tfoot, null, React.createElement(Tr, null, React.createElement(Td, null, "-"), React.createElement(Td, null, "-"))));
  },
  name: 'Default'
};
export var IntegrationTableWithTypography = {
  render: function render() {
    var _tableData2;
    return React.createElement(Typography, {
      type: "secondary"
    }, React.createElement(Table, {
      width: "100%"
    }, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, {
      width: "25%"
    }, "Symbol"), React.createElement(Th, {
      width: "40%"
    }, "Name"), React.createElement(Th, {
      width: "10%",
      textAlign: "right"
    }, "Development"), React.createElement(Th, {
      width: "10%"
    }, "Last"), React.createElement(Th, {
      width: "5%"
    }, "Flag"), React.createElement(Th, {
      width: "10%"
    }, "Quantity"))), React.createElement(Tbody, null, (_tableData2 = tableData) === null || _tableData2 === void 0 ? void 0 : _tableData2.map(function (instrument, index) {
      return React.createElement(Tr, {
        key: "".concat(instrument[0], "_").concat(index)
      }, React.createElement(Td, null, instrument[1]), React.createElement(Td, null, instrument[2]), React.createElement(Td, {
        textAlign: "right"
      }, instrument[5], "%"), React.createElement(Td, null, instrument[4]), React.createElement(Td, null, React.createElement(Flag, {
        country: "se",
        size: "m"
      })), React.createElement(Td, null, instrument[3]));
    })), React.createElement(Tfoot, null, React.createElement(Tr, null, React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-")))));
  },
  name: 'Integration: Table with Typography'
};
export var IntegrationTableWithTypographyAndEllipsisOnName = {
  render: function render() {
    var _tableData3;
    return React.createElement(Typography, {
      type: "secondary"
    }, React.createElement(Table, {
      width: "100%"
    }, React.createElement(Thead, null, React.createElement(Tr, null, React.createElement(Th, {
      width: "25%"
    }, "Symbol"), React.createElement(Th, {
      width: "40%"
    }, "Name"), React.createElement(Th, {
      width: "10%",
      textAlign: "right"
    }, "Development"), React.createElement(Th, {
      width: "10%"
    }, "Last"), React.createElement(Th, {
      width: "5%"
    }, "Flag"), React.createElement(Th, {
      width: "10%"
    }, "Quantity"))), React.createElement(Tbody, null, (_tableData3 = tableData) === null || _tableData3 === void 0 ? void 0 : _tableData3.map(function (instrument, index) {
      return React.createElement(Tr, {
        key: "".concat(instrument[0], "_").concat(index)
      }, React.createElement(Td, null, instrument[1]), React.createElement(Td, {
        ellipsis: true
      }, instrument[2]), React.createElement(Td, {
        textAlign: "right"
      }, instrument[5], "%"), React.createElement(Td, null, instrument[4]), React.createElement(Td, null, React.createElement(Flag, {
        country: "se",
        size: "m"
      })), React.createElement(Td, null, instrument[3]));
    })), React.createElement(Tfoot, null, React.createElement(Tr, null, React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-")))));
  },
  name: 'Integration: Table with Typography and ellipsis on name'
};
export var IntegrationTableStickyHeaderWithTypography = {
  render: function render() {
    var _tableData4;
    return React.createElement(Typography, {
      type: "secondary"
    }, React.createElement(Table, {
      width: "100%"
    }, React.createElement(Thead, {
      stickyHeader: true
    }, React.createElement(Tr, null, React.createElement(Th, {
      width: "25%"
    }, "Symbol"), React.createElement(Th, {
      width: "40%"
    }, "Name"), React.createElement(Th, {
      width: "10%",
      textAlign: "right"
    }, "Development"), React.createElement(Th, {
      width: "10%"
    }, "Last"), React.createElement(Th, {
      width: "5%"
    }, "Flag"), React.createElement(Th, {
      width: "10%"
    }, "Quantity"))), React.createElement(Tbody, null, (_tableData4 = tableData) === null || _tableData4 === void 0 ? void 0 : _tableData4.map(function (instrument, index) {
      return React.createElement(Tr, {
        key: "".concat(instrument[0], "_").concat(index)
      }, React.createElement(Td, null, instrument[1]), React.createElement(Td, null, instrument[2]), React.createElement(Td, {
        textAlign: "right"
      }, instrument[5], "%"), React.createElement(Td, null, instrument[4]), React.createElement(Td, null, React.createElement(Flag, {
        country: "SE",
        size: "s"
      })), React.createElement(Td, null, instrument[3]));
    })), React.createElement(Tfoot, null, React.createElement(Tr, null, React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-"), React.createElement(Td, null, "-")))));
  },
  name: 'Integration: Table (stickyHeader) with Typography'
};