import { useState, useEffect } from "react"
import { Button, Timeline } from 'antd'
import moment from 'moment'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { View } from  './View'
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 [displayedValues, setDisplayedValues] = useState([]);
  const [editingColumns, setEditingColumns] = useState(columns);
  const [isTableEditing, setIsTableEditing] = useState(false);

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

  useEffect(() => {
    let switchableColumns = []
    if(isTableEditing) {
      switchableColumns = columns.map(col =>
        ({ render: () => <input className='w-100'></input>,
          ...col
        })
      )
    } else {
      switchableColumns = columns.map(col =>
        ({ render: null,
          ...col
        })
      )
    }

    setEditingColumns(switchableColumns)
  }, [isTableEditing])

  const createButtons = (buttonNames, buttonContainerStyle, isEditing) => {
    return <div className={buttonContainerStyle}>
              {buttonNames.map(name =>
                <Button key={name} className='w-100' onClick={()=> setIsTableEditing(isEditing)}>{name}</Button>
              )}
            </div>
  }

  const crudButtons = 
    <div className='w-300px mt-12px'>
      <Button key='add' className='w-100' onClick={()=> setIsTableEditing(true)}>Добавить</Button>
      <Button key='edit' className='w-100' onClick={()=> setIsTableEditing(true)}>Редактировать</Button>
      <Button key='delete' className='w-100' onClick={()=> setIsTableEditing(true)}>Удалить</Button>
    </div>

  const confirmButtons = 
    <div className='w-300px d-flex mt-12px'>
      <Button key='confirm' className='w-100' onClick={()=> setIsTableEditing(false)}>Да</Button>
      <Button key='decline' className='w-100' onClick={()=> setIsTableEditing(false)}>Нет</Button>
    </div>

  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} 
                value={moment.utc(item.timestamp).local().format(format)}
              >
                {moment.utc(item.timestamp).local().format(format)}
              </Timeline.Item>
            )}
          </Timeline>
        </div>
      </div>
      <div className='w-100'>
        <View
          item={displayedValues.data}
          columns={editingColumns}
        />
      </div>
    </div>
  </> 
}