import React from 'react'
import styled from 'styled-components';

const UploadPreviewImageStyles = styled.div`
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    margin: 10px 0px;
    .uploadWrap {
      cursor : pointer;
      width: 64px;
      position: relative;
      overflow: hidden;
      display: inline-block;
      padding-bottom: 10px;
      .btn {
          position: relative;
          border: solid 1px #dd712f;
          border-radius: 2px;
          padding: 25px;
          margin-right: 10px;
        }
        .hor {
          position: absolute;
          bottom: 0;
          left: 0;
          margin: auto;
          right: 0;
          top: 0;
          width: 3px;
          background: #dd712f;
          height: 20px;
        }
        .ver {
          position: absolute;
          bottom: 0;
          left: 0;
          margin: auto;
          right: 0;
          top: 0;
          width: 20px;
          background: #dd712f;
          height: 3px;
        }
        input[type=file] {
          font-size: 100px;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
    }
`

const PreviewImageStyles = styled.div`
    display: flex;
    flex-wrap: wrap;
    .previewImageWrap {
      position: relative;
        .previewImage {
          width: 50px;
          height: 50px;
          background-size: contain;
          background-size: cover;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
          display: inline-block;
          margin: 0px 10px 10px 0px;
        }
        .closeButton {
          cursor: pointer;
          position: absolute;
          right: 4px;
          color: white;
          font-size: 16px;
          line-height: 10px;
          height: 14px;
          width: 14px;
          border-radius: 50%;
          background-color: #000000;
          text-align: center;
          top: -5px;
        }
    }
`

export class ImagePreviewUploadWidget extends React.Component {
    constructor(props){
        super(props)
        this.state = { newFiles : [], newFilesList : [] }
    }

    onUpload = files => {
        var newFiles = this.state.newFiles, newFileList = this.state.newFilesList
        newFiles = newFiles.concat(Array.from(files).map((doc,i)=>{ 
            return {
                showClose : true,
                documentUrl : URL.createObjectURL(doc)
            }
        }))
        for(var i=0,l=files.length; i<l; i++){
            newFileList.push(files[i])
        }
        this.setState({ newFiles , newFileList })
        this.props.getUploadedFiles(newFileList)
    }

    onRemove = doc => {
        var newFiles = this.state.newFiles, newFileList = this.state.newFilesList, isNewFile = false
        for(var i=0,l=newFiles.length; i<l; i++){
            if(doc.documentUrl==newFiles[i].documentUrl){
                isNewFile = true
                newFiles.splice(i,1)
                newFileList.splice(i,1)
                break;
            }
        }
        if(!isNewFile) this.props.onRemoval(doc)
        this.setState({ newFiles , newFileList })
        this.props.getUploadedFiles(newFileList)
    }

    render() {
        var existingFiles = this.props.onRemoval && typeof this.props.onRemoval=='function' && this.props.data.map(el=>{
            return {
                ...el,
                ...{ showClose : (el.hasOwnProperty('showClose'))?el.showClose:true}
            }
        }) || this.props.data
        var allFiles = existingFiles.concat(this.state.newFiles)
        var singleFile = [];
        if(this.props.single){
          singleFile = (allFiles && allFiles.length)?[allFiles[allFiles.length-1]]:[]
        }
      return (
            <UploadPreviewImageStyles className={this.props.className}>
                {
                    <div className="uploadWrap">
                        <div className='btn'>
                          <div className='hor'></div>
                          <div className='ver'></div>
                        </div>
                        <input type="file" multiple name="upload_receipt" id="upload_receipt"
                            onChange={(e)=>{
                                if(e.target.files && e.target.files.length>0){
                                    this.onUpload(e.target.files)    
                                }
                            }}
                            accept='.png,.jpg,.jpeg,image/png, image/jpeg,image/jpg, image/gif,.gif'
                        />
                    </div>
                } 
                <ImagePreviewWidget
                    data={(this.props.single)?singleFile:allFiles}
                    onCloseClick={this.onRemove}
                />
            </UploadPreviewImageStyles>
        );
    }
};

export class ImagePreviewWidget extends React.Component {
    render() {
        if(this.props.data && this.props.data.length){
        return (
            <PreviewImageStyles>
                {
                    this.props.data.map((image,k)=>{
                    return(
                        <div key={k+image.documentUrl} className='previewImageWrap'> 
                            {
                                image.showClose &&
                                <div className='closeButton' onClick={() => this.props.onCloseClick(image)}>x</div>
                            }
                            <a href={image.documentUrl} target="_blank">
                                <div className="previewImage" style={{'backgroundImage':`url('${image.documentUrl}')`}}></div>
                            </a>
                        </div>
                    )})
                }
            </PreviewImageStyles>
        )} 
        else return null
    }
}