import React, {
  useState
} from 'react';
import styled from 'styled-components';

import {
  BoxProps,
  BoxComponent
} from '@alicloud/console-components';
import {
  ChoiceItem,
  RadioGroup,
  InputNumber
} from '@alicloud/demo-rc-elements';

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

const ScBoxInner = styled.div`
  background: #58f;
  color: #fff;
  padding: 20px;
`;

const dataSourceDirection: ChoiceItem<BoxProps['direction'] | undefined>[] = [{
  label: '无',
  value: undefined
}, {
  label: 'row',
  value: 'row'
}, {
  label: 'column',
  value: 'column'
}, {
  label: 'row-reverse',
  value: 'row-reverse'
}];

export default function Testing({
  component
}: ITestingProps<BoxComponent>): JSX.Element {
  const Box = component;
  
  const [stateDirection, setStateDirection] = useState<BoxProps['direction'] | undefined>();
  const [stateSpacing, setStateSpacing] = useState<number>(16);
  const [stateMargin, setStateMargin] = useState<number>(0);
  const [statePadding, setStatePadding] = useState<number>(0);
  
  return <>
    <RadioGroup {...{
      label: 'props.direction',
      items: dataSourceDirection,
      value: stateDirection,
      onChange: setStateDirection
    }} />
    <div>
      spacing = <InputNumber {...{
        placeholder: 'props.spacing',
        value: stateSpacing,
        onChange: setStateSpacing
      }} />
    </div>
    <div>
      margin = <InputNumber {...{
        placeholder: 'props.margin',
        value: stateMargin,
        onChange: setStateMargin
      }} />
    </div>
    <div>
      padding = <InputNumber {...{
        placeholder: 'props.padding',
        value: statePadding,
        onChange: setStatePadding
      }} />
    </div>
    <Box {...{
      spacing: stateSpacing,
      margin: stateMargin,
      padding: statePadding,
      direction: stateDirection
    }}>
      <ScBoxInner>111</ScBoxInner>
      <ScBoxInner>222</ScBoxInner>
      <ScBoxInner>333</ScBoxInner>
      <ScBoxInner>444</ScBoxInner>
    </Box>
  </>;
}