import React from 'react'
import { Checkbox, Select } from 'antd'
import { DetailTableValues } from './types'
import { fontFamilyOptions, fontSizeOptions } from '../../types'

const tableColumns = [
  {
    title: '标题',
    key: 'title',
    type: 'text',
    width: 70,
    options: []
  },
  {
    title: '打印',
    key: 'printType',
    type: 'select',
    width: 40,
    options: [
      { label: '是', value: 'all' },
      { label: '否', value: 'none' },
    ]
  }
]

interface IProps {
  superRole: boolean
  detailTableValues: DetailTableValues['detailTableValues']
  onTableValuesChange: (values: DetailTableValues['detailTableValues']) => void
}

const TableSetting: React.FC<IProps> = ({ superRole, detailTableValues, onTableValuesChange }) => {

  const handleTableValueChange = (name: string, rowKey: number, columnKey: string, value: any) => {
    const values = detailTableValues.slice().map(detail => {
      if (detail.name == name) {
        return {
          ...detail,
          columns: detail.columns.map((row, index) => {
            if (index == rowKey) {
              return { ...row, [columnKey]: value }
            }
            return row
          })
        }
      }
      return detail
    })
    onTableValuesChange(values)
  }

  const handleTableChange = (name: string, { isPrint, fontSize, fontFamily }: { isPrint?: boolean, fontSize?: number, fontFamily?: string }) => {
    const valuse = detailTableValues.slice().map(detail => {
      if (detail.name == name) {
        return { ...detail, isPrint: isPrint ?? detail.isPrint, fontSize: fontSize ?? detail.fontSize, fontFamily: fontFamily ?? detail.fontFamily }
      }
      return detail
    })
    onTableValuesChange(valuse)
  }

  return (
    <div style={{ width: '100%', height: '100%', overflowY: 'auto' }}>
      {detailTableValues.map(detail => {
        const id = `report-print-column-config-table_${detail.name}`
        return (
          <div key={detail.name} style={{ marginBottom: 8 }}>
            <Checkbox disabled={!superRole} checked={detail.isPrint} onChange={e => handleTableChange(detail.name, { isPrint: e.target.checked })}>{detail.label || `表格${detail.name}`}</Checkbox>
            <div style={{ marginTop: 3 }}>
              <span>字体：</span>
              <Select
                disabled={!superRole}
                style={{ width: 100 }}
                size='small'
                value={detail.fontFamily}
                options={fontFamilyOptions}
                onChange={val => handleTableChange(detail.name, { fontFamily: val })}
              />
              <span>&nbsp;&nbsp;字号：</span>
              <Select
                disabled={!superRole}
                style={{ width: 100 }}
                size='small'
                value={detail.fontSize}
                options={fontSizeOptions}
                onChange={val => handleTableChange(detail.name, { fontSize: val })}
              />
            </div>
            <table style={{ marginTop: 8 }} id={id} className="column-config-table" width={300} cellSpacing={0} >
              <thead>
                <tr>
                  {tableColumns.map(column => (<th key={column.key} >{column.title}</th>))}
                </tr>
              </thead>
              <tbody>
                {detail.columns.map((row, index) => (
                  <tr key={index}>
                    {tableColumns.map(column => (
                      <td key={column.key}>
                        {column.type == 'text' && <>{row.title}</>}
                        {column.type == 'select' &&
                          <Select
                            disabled={!superRole}
                            size='small'
                            showArrow={false}
                            //@ts-ignore
                            value={row[column.key]}
                            getPopupContainer={() => document.getElementById(id)!}
                            dropdownClassName='column-config-table-select-dropdown'
                            onChange={value => { handleTableValueChange(detail.name, index, column.key, value) }}
                          >
                            {column.options.map((option, index) => (
                              <Select.Option key={index} value={option.value}>
                                {option.label}
                              </Select.Option>
                            ))}
                          </Select>
                        }
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )
      })}
    </div>
  )
}

export default TableSetting