import { useState, useEffect } from 'react'
import { Button, Form, Timeline } from 'antd'
import moment from 'moment'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { View } from  './View'
import LoaderPortal from '../../components/LoaderPortal'
import '../../styles/index.css'
import '../../styles/measure.css'

const format='YYYY.MM.DD HH:mm'

export const MeasureTable = ({title, columns, values}) => {
  var defaultDisplay = values && values.length
                       ? values[values.length-1] 
                       : []

  const [showLoader, setShowLoader] = useState(false);
  const [displayedValues, setDisplayedValues] = useState([]);
  const [editingColumns, setEditingColumns] = useState(columns);
  const [isTableEditing, setIsTableEditing] = useState(false);
  const [editingActionName, setEditingActionName] = useState('');

  const [measuresForm] = Form.useForm();

  const buttonsConfig = [
    {name:'Добавить', key:'add'}, 
    {name:'Редактировать', key:'edit'}, 
    {name:'Удалить', key:'delete'}
  ]

  const createButtons = (config, onClickDelegate) => {
    return (
      <div className='w-300px mt-12px'>
        {config.map(c => {
          return (
            <Button 
              key={c.key} 
              className='w-100' 
              onClick={onClickDelegate}
            >
              {c.name}
            </Button>
          )
        })}
      </div>
    )
  }

  const crudButtons = createButtons(buttonsConfig, (e)=> {
    setEditingActionName(e.target.innerText)
    setIsTableEditing(true)
  })

  const confirmButtons = 
    <div className='w-300px'>
      <h3 style={{textAlign: 'center'}}>{editingActionName} данные?</h3>
      <div className='d-flex mt-20px'>
        <Button key='confirm' className='w-100' onClick={()=> measuresForm.submit()}>Да</Button>
        <Button key='decline' className='w-100' onClick={()=> setIsTableEditing(false)}>Нет</Button>
      </div>
    </div>

  const createEditingColumns = (cols, renderDelegate) =>
    cols.map(col =>
      ({ render: renderDelegate,
        ...col
      })
    )

  useEffect(() => {
    setDisplayedValues(defaultDisplay)
  }, [defaultDisplay])

  useEffect(() => {
    let switchableColumns = []
    isTableEditing && editingActionName !== 'Удалить'
      ? switchableColumns = createEditingColumns(columns, () => <input className='w-100'></input>)
      : switchableColumns = createEditingColumns(columns, null)

    setEditingColumns(switchableColumns)
  }, [isTableEditing])

  
  let handleSubmitMeasuresForm = async (formData) => {
    // if(isTableEditing)
    //   measuresForm.setFieldsValue({
    //     ...displayedValues
    //   });

    measuresForm.validateFields()

    setShowLoader(true)
    setShowLoader(false)
  }

  return <> 
    &nbsp;
    <h3>{title}</h3>
    &nbsp;
    <div className='d-flex'>
      <div className='flex-direction-column'>
        <div className='d-flex button-container'>
          {isTableEditing 
            ? confirmButtons
            : crudButtons
          }
        </div>

        <div className='measure-dates mt-20px'>
          <Timeline className='mt-12px ml-10px'>
            {values.map((item, index) => 
              <Timeline.Item 
                key={item.id}
                className={index === values.length-1 
                           ? 'last-measure-button' 
                           : 'measure-button'}
                onClick={() => setDisplayedValues(values.find(el => el.id === item.id))} 
                dot={item.id === displayedValues.id 
                            ? <ExclamationCircleOutlined className="timeline-clock-icon" /> 
                            : null}
              >
                {moment.utc(item.timestamp).local().format(format)}
              </Timeline.Item>
            )}
          </Timeline>
        </div>
      </div>
      <div className='w-100'>
        <LoaderPortal show={showLoader}>
          <Form 
            form={measuresForm}
            onFinish={handleSubmitMeasuresForm}
          >
            <View
              item={displayedValues.data}
              columns={editingColumns}
            />
          </Form>
        </LoaderPortal>
      </div>
    </div>
  </> 
}