import React from 'react';
import Spin from 'antd/lib/Spin';
import { RendererProps } from '../../../../../factory';
import { _Preview_Props } from '../LionFilePreview';

import { WrapperModal } from '../style'

export default class FilePreview extends React.PureComponent<_Preview_Props & RendererProps, any> {
  state = {
    data: ''
  }



  componentDidUpdate() {
    const { current, env } = this.props;
    if (current && current?.name && (current?.addr || current?.url)) {
      env.fetcher({
        method: 'get',
        url: current?.addr || current?.url,
        responseType: 'text'
      }).then((res: any) => {

        this.setState({
          data: res.data
        })
      })
    }
  }

  render() {
    const { current } = this.props;

    return <>
      {current && current?.name && (current?.addr || current?.url) ?
        <WrapperModal
          getContainer={this.props.env?.getModalContainer as any}
          wrapClassName="file-preview"
          title={current?.name}
          visible={this.props.visible}
          footer={null}
          onCancel={this.props.setVisible}
          closable
          destroyOnClose={true}
        >
          <div className='view'
            style={{
              display: 'flex',
              justifyContent: 'center',
              /* padding: 50px 0; */
              overflow: 'auto',
              /* width: 200px; */
              margin: 'auto',
              height: '400px',
              width: "100%"
            }}
          >{
              <div className='pageContainer'
                style={{
                  width: '100vw',
                  maxWidth: '100%',
                  height: "inherit"
                }}>
                <div style={{
                  width: "100%",
                  height: "inherit",
                  whiteSpace: 'pre-line'
                }}  >
                  {this.state.data.length === 0 ? <Spin size="large" /> : this.state.data}
                </div>
              </div>
            }

          </div>

        </WrapperModal> : null
      }
    </>
  }
}