import React, {
  CSSProperties
} from 'react';

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

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

const myGridStyle12: CSSProperties = {
  display: 'block',
  textAlign: 'center',
  height: '40px',
  lineHeight: '40px',
  background: 'rgba(59, 154, 255, 0.25)'
};

const myGridStyle6: CSSProperties = {
  display: 'block',
  textAlign: 'center',
  height: '40px',
  lineHeight: '40px',
  background: 'rgba(59, 154, 255, 1)'
};

const myGridStyle4: CSSProperties = {
  display: 'block',
  textAlign: 'center',
  height: '40px',
  lineHeight: '40px',
  background: 'rgba(59, 154, 255, 0.25)'
};

const myGridStyle3: CSSProperties = {
  display: 'block',
  textAlign: 'center',
  height: '40px',
  lineHeight: '40px',
  background: 'rgba(59, 154, 255, 1)'
};

export default function Testing({
  component
}: ITestingProps<ResponsiveGridComponent>): JSX.Element {
  const ResponsiveGrid = component;
  
  return <>
    <H3>栅格布局</H3>
    <ResponsiveGrid gap={[12, 24]} rows={3}>
      <ResponsiveGrid.Cell style={myGridStyle12} colSpan={{
        desktop: 12,
        tablet: 12,
        phone: 12
      }}>12</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle6} colSpan={{
        desktop: 6,
        tablet: 12,
        phone: 12
      }}>6</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle6} colSpan={6}>6</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle4} rowSpan={2} colSpan={4}>4</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle4} colSpan={4}>4</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle4} colSpan={4}>4</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
    </ResponsiveGrid>
    <H3>栅格布局-phone</H3>
    <ResponsiveGrid device="phone" gap={[12, 24]} rows={3}>
      <ResponsiveGrid.Cell style={myGridStyle12} colSpan={{
        desktop: 12,
        tablet: 12,
        phone: 12
      }}>12</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle6} colSpan={{
        desktop: 6,
        tablet: 12,
        phone: 12
      }}>6</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle6} colSpan={6}>6</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle4} colSpan={4} rowSpan={2}>4</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle4} colSpan={4}>4</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle4} colSpan={4}>4</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell style={myGridStyle3} colSpan={3}>3</ResponsiveGrid.Cell>
    </ResponsiveGrid>
  </>;
}