/**
 * title: "多项选项卡（支持横纵布局）"
 * description: "使用 `<Checkbox.Group>` 渲染 `<Checkbox>` 分组,定制Checkbox的为卡片样式"
 */
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';
import styled from 'styled-components';

const List = [
  {
    label: '文本信息A',
    value: 'A',
  },
  {
    label: '文本信息B',
    value: 'B',
  },
  {
    label: '文本信息C',
    value: 'C',
    disabled: true,
  },
  {
    label: '文本信息D',
    value: 'D',
  },
];

const disableStyle = {
  backgroundColor: '#f6f6f6',
};

const checkedStyle = {
  backgroundColor: '#eff3f8',
};

export default () => {
  const [checkedList, setCheckedList] = useState<any[]>([]);
  const getStyle = (item) => {
    if (item.disabled) {
      return disableStyle;
    }
    if (checkedList.find((i) => i === item.value)) {
      return checkedStyle;
    }
    return {};
  };

  return (
    <Checkbox.Group value={checkedList} onChange={setCheckedList}>
      <Container>
        {List.slice(0, 2).map((item) => (
          <CheckItem style={getStyle(item)}>
            <Checkbox value={item.value} disabled={item.disabled}>
              {item.label}<br />
              <span
                style={{
                  margin: '0 0 0 24px',
                  color: '#808080',
                  display: 'inline-block',
                  lineHeight: '16px',
                }}
              >
                对于选项的描述/解释文案，对于选项的描述/解释文案
              </span>
            </Checkbox>
          </CheckItem>
        ))}
      </Container>
      <Container>
        {List.slice(2, 4).map((item) => (
          <CheckItem style={getStyle(item)}>
            <Checkbox value={item.value} disabled={item.disabled}>
              {item.label}<br />
              <span
                style={{
                  margin: '0 0 0 24px',
                  color: '#808080',
                  display: 'inline-block',
                  lineHeight: '16px',
                }}
              >
                对于选项的描述/解释文案，对于选项的描述/解释文案
              </span>
            </Checkbox>
          </CheckItem>
        ))}
      </Container>
    </Checkbox.Group>
  );
};



const CheckItem = styled.div`
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  padding: 16px;
  margin: 4px;
  width: 230px;
  display: inline-block;
  &:hover {
    background-color: #f7f9fa;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
  }
`;

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 470px; /* 2 * (230px + 4px * 2) */
`;