import React, { useEffect, useState } from 'react';
import { Timeline, Spin } from 'antd';

import { dispatch } from '../../../../model'; 
import { formatVersionHistoryDate } from '../../../../util';
import { Action, ModelerId, VersionId } from '../../../../util/constant';

const VersionHistory = (props) => {

  const { id } = props;
  const [ versions, setVersions ] = useState([]);
  const [ loading, setLoading ] = useState(false);

  useEffect(() => {
    if ((id||'') !== '') {
      getVersions();
    }
    
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ id ])

  const getVersions = () => {
    setLoading(true);
    dispatch({
      type: 'assetmanage.listDataAssetHistoryTimeline',
      payload: {
        dataAssetId: id
      },
      callback: data => {
        setLoading(false);
        setVersions(data||[]);
      },
      error: () => {
        setLoading(false);
      }
    })
  }

  const onVersionItemClick = (version) => {
    window.open(`/data-govern/data-model-action?${Action}=detail-version&${ModelerId}=${version.dataModelId||''}&${VersionId}=${version.id||''}`);
  }

  return (
    <Spin spinning={loading}>
      <Timeline style={{ padding: 24 }}>
      {
        (versions||[]).map((version, index) => {
          let name = version.name||'';
          if (version.isCurrentVersion) {
            name = name+'(当前版本)';
          }

          let color = '#77DEBF';
          // if (version.state?.id === '1') {
          //   color = '#DE7777';
          // } else if (version.state?.id === '2') {
          //   color = '#779BDE';
          // } else if (version.state?.id === '4') {
          //   color = '#77DEBF';
          // }

          return <Timeline.Item key={index} color={ color } >
            <div>
              <div>
                {/* <a onClick={()=>{ onVersionItemClick(version); }}>
                {name}
                </a> */}
                {name}
              </div>
              <div className='pt-2'>
                <span style={{ color }}>{version.state?.cnName||''}</span>
              </div>
              <div className='pt-2'>
                <span>{version.editor||''}</span>
                <span className='pl-2'>{formatVersionHistoryDate(version.ts)}</span>
              </div>
            </div>
          </Timeline.Item>
        })
      }
      </Timeline>
    </Spin>
  );
}

export default VersionHistory;