import React, { createElement, useState, Component } from 'react';
import { Input, Grid, Radio } from '@alifd/next';
import '../Base.scss';
import './index.scss';

const { Row, Col } = Grid;
const RadioGroup = Radio.Group;

interface GridLayoutSetterProps {}

const ColumnTypes = [
  {
    value: '12',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAYCAYAAAC4CK7hAAAAAXNSR0IArs4c6QAAAF5JREFUWAntksEJACAQw9RBXMKHu7j/IIIjFAJy5P4tNLk+91mtwI0CG94Eh/xmUiMagQj4WhDYuFYjMTooqBEIbFyrkRgdFNQIBDau1UiMDgpqBAIb12okRgcFyxi5eHABErS/7HsAAAAASUVORK5CYII=',
  },
  {
    value: '6:6',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAYCAYAAAC4CK7hAAAAAXNSR0IArs4c6QAAAGxJREFUWAntkTERgDAUxQAhmGDACwLrhQETKOFwkKWZ0vldcz9Z9/M6lonvvcfzfz+bs028Qf26Q1TdAFYRIEmdVETVDWAVAZLUSUVU3QBWESBJnVRE1Q1gFQGS1ElFVN0AVhEgSZ1URNUNYB9LtgUS+2cZkwAAAABJRU5ErkJggg==',
  },
  {
    value: '3:9',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAYCAYAAAC4CK7hAAAAAXNSR0IArs4c6QAAAHFJREFUWAnt0aERgDAUBFGgEJpA0AsF0guCJqiEwayGwazYqBPJn8t/47xuy/DyXMd+Ple/vHk5+ve16fcEyYA+IoGgRiKsQhISkUBQIxFWIQmJSCCokQirkIREJBDUSIRVSEIiEghqJMIqJCERCQQ1bhvFBRLFThJWAAAAAElFTkSuQmCC',
  },
  {
    value: '9:3',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAYCAYAAAC4CK7hAAAAAXNSR0IArs4c6QAAAG5JREFUWAntkTENgFAUxAAhmGDACwLxwoAJlBAk0KTJH/r2u9xr53U/tmmwe67z/ib92bYM9gOe0yMYnRTMiAQW12YEo5OCGZHA4tqMYHRSMCMSWFybEYxOCmZEAotrM4LRScGMSGBxbUYwOin4AnunBRKk87oLAAAAAElFTkSuQmCC',
  },
  {
    value: '4:4:4',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAYCAYAAABTPxXiAAAAAXNSR0IArs4c6QAAAGpJREFUWAntksENgCAAxJBBWMKHuzggu/BwCScxrsA1kZjy7wVatnace5k89+jXi369USfvvxTmI1bJYQlLgAb8TqDMaMoSkT4QtgQoM5qyRKQPhC0ByoymLBHpA2FLgDKjKUtE+kD4FyUe0KAJEsF/0uoAAAAASUVORK5CYII=',
  },
  {
    value: '3:6:3',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAYCAYAAAC4CK7hAAAAAXNSR0IArs4c6QAAAHRJREFUWAljlDOPMmYgEjw6uewsSCkpeog0GkUZOfYwoZgwhDmjHhlskTcaI6MxQqMQGE1aNApYso0djRGyg45GGkdjhEYBS7axozFCdtDRSONojNAoYMk2djRGyA46GmkcjREaBSzZxo7GCNlBRyONwyZGAB78CRL9+D+tAAAAAElFTkSuQmCC',
  },
  {
    value: '3:3:3:3',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAYCAYAAAC4CK7hAAAAAXNSR0IArs4c6QAAAG1JREFUWAntksEJgEAMBO+uEJvwYS8WaC8+bMJKDjs4FgaCTN7Zhcykb8e5t8V57+v5VitmxuIN5dc8pJoijWgEIuBrQWDjWo3E6KCgRiCwca1GYnRQUCMQ2LhWIzE6KKgRCGxcq5EYHRT8jZEJ8jMNEnW0C4YAAAAASUVORK5CYII=',
  },
  {
    value: '2:2:2:2:2:2',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAYCAYAAAC4CK7hAAAAAXNSR0IArs4c6QAAAG1JREFUWAntksEJgEAMBO+uEJvwYS8WaC8+bMJKDjs4FgaCTN7Zhcykb8e5t8V57+v5VitmxuIN5dc8pJoijWgEIuBrQWDjWo3E6KCgRiCwca1GYnRQUCMQ2LhWIzE6KKgRCGxcq5EYHRT8jZEJ8jMNEnW0C4YAAAAASUVORK5CYII=',
  },
];
const OtherColumnType = {
  value: 'other',
  icon: '"data:image/png;base64,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"',
};

const GridLayoutSetter = (props) => {
  const { value, onChange } = props;
  const [inputValue, setInputValue] = useState(value);
  const [selectValue, setSelectValue] = useState(value);

  const inputChange = (item) => {
    setInputValue(item);
    onChange(item);
  };
  const selectChange = (item) => {
    setInputValue(item);
    setSelectValue(item);
    onChange(item);
  };

  let hasDefaultType = false;

  const RadioNodes = ColumnTypes.map((item, index) => {
    if (selectValue == item.value) {
      hasDefaultType = true;
    }
    return (
      <Radio value={item.value} style={{border:'0',height:'35px',padding:'0'}}>
        <div className={['ratio-box', value == item.value ? 'selected' : null].join(' ')}>
          <div className="ratio-icon" style={{ backgroundImage: `url(${item.icon})` }}></div>
        </div>
      </Radio>
    );
  });

  if (!hasDefaultType) {
    RadioNodes.push(
      <Radio value={OtherColumnType.value} style={{border:'0',height:'35px',padding:'0'}}>
        <div className="ratio-box selected">
          <div
            className="ratio-icon"
            style={{ backgroundImage: `url(${OtherColumnType.icon})` }}
          ></div>
        </div>
      </Radio>,
    );
  }

  return (
    <div>
      <RadioGroup onChange={selectChange} shape="button" className="radio-group">
        {RadioNodes}
      </RadioGroup>
      <div className="field-box">
        <div className="field-head">列比例</div>
        <div className="field-body">
          <Input value={inputValue} style={{ width: '100%' }} onChange={inputChange}></Input>
        </div>
      </div>
    </div>
  );
};

export default class extends Component<GridLayoutSetterProps> {
  render() {
    return <GridLayoutSetter {...this.props} />;
  }
}