import React from 'react';
import QueueAnim from 'rc-queue-anim';
import RubixTables from './RubixTables';

const MaterialTable = () => (
  <article className="article">
    <h2 className="article-title">Material Table</h2>
    <div className="box box-default table-box mdl-shadow--2dp">
      <table className="mdl-data-table">
        <thead>
          <tr>
            <th className="mdl-data-table__cell--non-numeric">#</th>
            <th className="mdl-data-table__cell--non-numeric">Code</th>
            <th className="mdl-data-table__cell--non-numeric">Material</th>
            <th>Quantity</th>
            <th>Unit price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="mdl-data-table__cell--non-numeric">1</td>
            <td className="mdl-data-table__cell--non-numeric">AZ90</td>
            <td className="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
            <td>25</td>
            <td>$2.90</td>
          </tr>
          <tr>
            <td className="mdl-data-table__cell--non-numeric">2</td>
            <td className="mdl-data-table__cell--non-numeric">BC30</td>
            <td className="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
            <td>50</td>
            <td>$1.25</td>
          </tr>
          <tr>
            <td className="mdl-data-table__cell--non-numeric">3</td>
            <td className="mdl-data-table__cell--non-numeric">DL32</td>
            <td className="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
            <td>10</td>
            <td>$2.35</td>
          </tr>
        </tbody>
      </table>
    </div>
  </article>
);

const TableStyle = () => (
  <article className="article">
    <h2 className="article-title">Table Style</h2>
    <div className="row">
      <div className="col-xl-6">
        <div className="box box-transparent">
          <div className="box-header no-padding-h">Basic table</div>
          <div className="box-body no-padding-h">

            <div className="box box-default table-box mdl-shadow--2dp">
              <table className="mdl-data-table">
                <thead>
                  <tr>
                    <th className="mdl-data-table__cell--non-numeric">#</th>
                    <th className="mdl-data-table__cell--non-numeric">Material</th>
                    <th>Quantity</th>
                    <th>Unit price</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">1</td>
                    <td className="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
                    <td>25</td>
                    <td>$2.90</td>
                  </tr>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">2</td>
                    <td className="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
                    <td>50</td>
                    <td>$1.25</td>
                  </tr>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">3</td>
                    <td className="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
                    <td>10</td>
                    <td>$2.35</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>
      </div>
      <div className="col-xl-6">
        <div className="box box-transparent">
          <div className="box-header no-padding-h">Striped table</div>
          <div className="box-body no-padding-h">

            <div className="box box-default table-box mdl-shadow--2dp">
              <table className="mdl-data-table table-striped">
                <thead>
                  <tr>
                    <th className="mdl-data-table__cell--non-numeric">#</th>
                    <th className="mdl-data-table__cell--non-numeric">Material</th>
                    <th>Quantity</th>
                    <th>Unit price</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">1</td>
                    <td className="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
                    <td>25</td>
                    <td>$2.90</td>
                  </tr>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">2</td>
                    <td className="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
                    <td>50</td>
                    <td>$1.25</td>
                  </tr>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">3</td>
                    <td className="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
                    <td>10</td>
                    <td>$2.35</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div className="row">
      <div className="col-xl-6">
        <div className="box box-transparent">
          <div className="box-header no-padding-h">Bordered table</div>
          <div className="box-body no-padding-h">

            <div className="box box-default table-box mdl-shadow--2dp">
              <table className="mdl-data-table table-bordered">
                <thead>
                  <tr>
                    <th className="mdl-data-table__cell--non-numeric">#</th>
                    <th className="mdl-data-table__cell--non-numeric">Material</th>
                    <th>Quantity</th>
                    <th>Unit price</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">1</td>
                    <td className="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
                    <td>25</td>
                    <td>$2.90</td>
                  </tr>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">2</td>
                    <td className="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
                    <td>50</td>
                    <td>$1.25</td>
                  </tr>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">3</td>
                    <td className="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
                    <td>10</td>
                    <td>$2.35</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>
      </div>
      <div className="col-xl-6">
        <div className="box box-transparent">
          <div className="box-header no-padding-h">Contextual table</div>
          <div className="box-body no-padding-h">

            <div className="box box-default table-box mdl-shadow--2dp">
              <table className="mdl-data-table">
                <thead>
                  <tr>
                    <th className="mdl-data-table__cell--non-numeric">#</th>
                    <th className="mdl-data-table__cell--non-numeric">Material</th>
                    <th>Quantity</th>
                    <th>Unit price</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">1</td>
                    <td className="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
                    <td>25</td>
                    <td>$2.90</td>
                  </tr>
                  <tr className="bg-color-info">
                    <td className="mdl-data-table__cell--non-numeric">2</td>
                    <td className="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
                    <td>50</td>
                    <td>$1.25</td>
                  </tr>
                  <tr>
                    <td className="mdl-data-table__cell--non-numeric">3</td>
                    <td className="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
                    <td>10</td>
                    <td>$2.35</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>
      </div>
    </div>
  </article>
);

const Page = () => (
  <section className="container-fluid with-maxwidth chapter">
    <QueueAnim type="bottom" className="ui-animate">
      <div key="1"><MaterialTable /></div>
      <div key="2"><TableStyle /></div>
      <div key="3"><RubixTables /></div>
    </QueueAnim>
  </section>
);

module.exports = Page;
