import React from 'react';
import styled from 'styled-components';

import {
  GridComponent
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

import {
  ITestingProps
} from '../../types';

const ScTesting = styled.div`
  .next-row {
    margin: 10px 0;
  }
  
  .next-col {
    border: 1px solid #33f;
    border-radius: 2px;
    background-color: #f9f9f9;
    color: #666;
    height: 32px;
    line-height: 32px;
    text-align: center;
  }
`;

export default function Testing({
  component
}: ITestingProps<GridComponent>): JSX.Element {
  const Grid = component;
  const GridRow = Grid.Row;
  const GridCol = Grid.Col;
  
  return <ScTesting>
    <H3>One</H3>
    <GridRow>
      <GridCol span="24">col-24</GridCol>
    </GridRow>
    <H3>Two</H3>
    <GridRow>
      <GridCol span="12">col-12</GridCol>
      <GridCol span="12">col-12</GridCol>
    </GridRow>
    <H3>Three</H3>
    <GridRow>
      <GridCol span="8">col-8</GridCol>
      <GridCol span="8">col-8</GridCol>
      <GridCol span="8">col-8</GridCol>
    </GridRow>
    <H3>Four</H3>
    <GridRow>
      <GridCol span="6">col-6</GridCol>
      <GridCol span="6">col-6</GridCol>
      <GridCol span="6">col-6</GridCol>
      <GridCol span="6">col-6</GridCol>
    </GridRow>
    <H3>Five</H3>
    <GridRow>
      <GridCol span="1p5">col-1p5</GridCol>
      <GridCol span="1p5">col-1p5</GridCol>
      <GridCol span="1p5">col-1p5</GridCol>
      <GridCol span="1p5">col-1p5</GridCol>
      <GridCol span="1p5">col-1p5</GridCol>
    </GridRow>
    <H3>Six</H3>
    <GridRow>
      <GridCol span="4">col-4</GridCol>
      <GridCol span="4">col-4</GridCol>
      <GridCol span="4">col-4</GridCol>
      <GridCol span="4">col-4</GridCol>
      <GridCol span="4">col-4</GridCol>
      <GridCol span="4">col-4</GridCol>
    </GridRow>
  </ScTesting>;
}