import { Button, Form, Input, Popconfirm, Table } from 'antd'
import React, { useContext, useEffect, useRef, useState } from 'react'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
const EditableContext = React.createContext(null)
const FormItem = Form.Item

const LogTable = styled.div`
  margin-left: 24px;
  .delButton {
    margin-left: 40px;
  }
`

const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm()
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  )
}

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false)
  const inputRef = useRef(null)
  const form = useContext(EditableContext)
  useEffect(() => {
    if (editing) {
      inputRef.current.focus()
    }
  }, [editing])

  const toggleEdit = () => {
    setEditing(!editing)
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    })
  }

  const save = async () => {
    try {
      const values = await form.validateFields()
      toggleEdit()
      handleSave({ ...record, ...values })
    } catch (errInfo) {
      console.log('Save failed:', errInfo)
    }
  }

  let childNode = children

  if (editable) {
    childNode = editing ? (
      <FormItem
        style={{
          margin: 0,
        }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}>
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </FormItem>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          paddingRight: 24,
        }}
        onClick={toggleEdit}>
        {children}
      </div>
    )
  }

  return <td {...restProps}>{childNode}</td>
}

export default function LogItems() {
  const itemData = [
    {
      key: '0',
      name: '每日供应商销量预测作业2',
      type: 'java',
      sort: '业务预测',
      creTime: '2022.8.18 12:00:00',
      updTime: '2022.8.18 12:00:00',
    },
    {
      key: '1',
      name: '每日供应商销量预测作业21',
      type: 'java',
      sort: '业务预测',
      creTime: '2022.8.18 12:00:00',
      updTime: '2022.8.18 12:00:00',
    },
  ]
  const [dataSource, setDataSource] = useState(
    itemData
    //   [
    //   {
    //     key: '0',
    //     name: '每日供应商销量预测作业2',
    //     type: 'java',
    //     sort: '业务预测',
    //     creTime: '2022.8.18 12:00:00',
    //     updTime: '2022.8.18 12:00:00',
    //   },
    //   {
    //     key: '1',
    //     name: '每日供应商销量预测作业21',
    //     type: 'java',
    //     sort: '业务预测',
    //     creTime: '2022.8.18 12:00:00',
    //     updTime: '2022.8.18 12:00:00',
    //   },
    // ]
  )
  const [count, setCount] = useState(2)

  const handleDelete = key => {
    const newData = dataSource.filter(item => item.key !== key)
    setDataSource(newData)
  }

  const defaultColumns = [
    {
      title: '作业名称',
      dataIndex: 'name',
      width: '16.6%',
    },
    {
      title: '作业类型',
      dataIndex: 'type',
      width: '16.6%',
    },
    {
      title: '作业分类',
      dataIndex: 'sort',
      width: '16.6%',
    },
    {
      title: '创建时间',
      dataIndex: 'creTime',
      width: '16.6%',
    },
    {
      title: '更新时间',
      dataIndex: 'updTime',
      width: '16.6%',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '16.6%',

      render: (_, record) =>
        dataSource.length >= 1 ? (
          <>
            <Popconfirm>
              <a>编辑</a>
            </Popconfirm>
            <Popconfirm
              title="Sure to delete?"
              onConfirm={() => handleDelete(record.key)}>
              <a className="delButton">删除</a>
            </Popconfirm>
          </>
        ) : null,
    },
  ]

  const handleSave = row => {
    const newData = [...dataSource]
    const index = newData.findIndex(item => row.key === item.key)
    const item = newData[index]
    newData.splice(index, 1, { ...item, ...row })
    setDataSource(newData)
  }

  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  }
  const columns = defaultColumns.map(col => {
    if (!col.editable) {
      return col
    }

    return {
      ...col,
      onCell: record => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    }
  })
  return (
    <LogTable>
      <Table
        components={components}
        rowClassName={() => 'editable-row'}
        bordered
        dataSource={dataSource}
        columns={columns}
        style={{
          marginTop: '20px',
        }}
      />
    </LogTable>
  )
}