import * as React from 'react';
import { Icon, Row, Col, Button, Checkbox } from '@btri-ui/base';
import iconJson from '../iconify.json';
import { useState } from 'react';

function toLine(name: string) {
  const nameArr = name.match(/([A-Z][a-z]*|\d+)/g);
  const resName = nameArr?.reduce((pre, cur, index) => {
    if (index === 0) {
      return cur.toLowerCase();
    }
    return pre + '-' + cur.toLowerCase();
  }, '');

  return resName;
}

function exportJsonFile(icons) {
  const lineNames = icons.map((iconname) => {
    return toLine(iconname);
  });
  const newIconsData = lineNames.reduce((pre, curName) => {
    pre[curName] = iconJson.icons[curName];
    return pre;
  }, {});

  // 创建一个包含数据的对象
  var data = {
    prefix: 'ibuilding',
    width: 1024,
    height: 1024,
    icons: newIconsData,
  };

  // 将对象转换为JSON字符串
  var jsonData = JSON.stringify(data);

  // 创建一个Blob对象，用于存储JSON字符串
  var blob = new Blob([jsonData], { type: 'application/json' });

  // 创建一个a标签并设置文件名
  var a = document.createElement('a');
  a.download = 'data.json';
  a.href = URL.createObjectURL(blob);

  // 触发点击事件，下载JSON文件
  a.click();
}

export default () => {
  const iconsMap =
    Object.keys(iconJson.icons || {})?.map((icon) => {
      return icon
        .split('-')
        .map((s, i) =>
          i === 0
            ? s.charAt(0).toUpperCase() + s.slice(1)
            : s.charAt(0).toUpperCase() + s.slice(1),
        )
        .join('');
    }) || [];
  const [checkIcon, setCheckIcon] = useState([]);
  const [openCheck, setOpenCheck] = useState(false);
  return (
    <div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          gap: '10px',
          marginBottom: '20px',
        }}
      >
        {openCheck && (
          <div>
            <Checkbox
              checked={checkIcon.length === iconsMap.length}
              indeterminate={
                checkIcon.length > 0 && checkIcon.length < iconsMap.length
              }
              onChange={(e) => {
                setCheckIcon(e.target.checked ? iconsMap : []);
              }}
              label="全选"
            />
            <span style={{ marginLeft: '8px' }}>全选</span>
          </div>
        )}
        <Button
          type={openCheck ? 'secondary' : 'primary'}
          onClick={() => {
            setOpenCheck((pre) => {
              return !pre;
            });
          }}
        >
          {openCheck ? '关闭批量选择' : '批量选择'}
        </Button>
        {openCheck && (
          <Button
            type={'primary'}
            onClick={() => {
              exportJsonFile(checkIcon);
            }}
          >
            导出图标
          </Button>
        )}
      </div>

      <div style={{ height: '500px', overflow: 'scroll' }}>
        <Checkbox.Group
          value={checkIcon}
          onChange={(value) => {
            console.log(value, '9999');
            setCheckIcon(value);
          }}
        >
          <Row autoMode={true}>
            {iconsMap.map((name) => {
              return (
                <Col span={4} key={`${name}Icon`}>
                  <div
                    style={{
                      textAlign: 'center',
                      color: '#333333',
                      borderRadius: '8px',
                      margin: '0 8px',
                      padding: '18px 0',
                      border:
                        openCheck && checkIcon.includes(name)
                          ? '1px solid var(--gray-4)'
                          : '1px solid transparent',
                      background:
                        openCheck && checkIcon.includes(name)
                          ? 'var(--gray-1)'
                          : '',
                    }}
                  >
                    <div
                      style={{
                        fontSize: '60px',
                        display: 'flex',
                        justifyContent: 'center',
                        position: 'relative',
                      }}
                    >
                      <Icon iconName={name}></Icon>
                      <div
                        style={{
                          position: 'absolute',
                          right: 12,
                          top: -6,
                          display: 'flex',
                        }}
                      >
                        {openCheck && <Checkbox value={name} />}
                      </div>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: '12px' }}>
                      {name}
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>
        </Checkbox.Group>
      </div>
    </div>
  );
};