import React, { useState, useRef } from 'react';
import styled from 'styled-components'
import { Modal, Button } from 'react-bootstrap'
import './modal-view.styles.scss'

const SubCode = styled.div`
    padding: 20px;
    border-radius: 5px;
    border: 2px dashed #dce1e4;
    background: #fbfbfb;    
`

const ModalComponent = ({subscriptionCodeValue, title ,...props}) => {
    const [copySuccess, setCopySuccess] = useState('COPY');
    const textAreaRef = useRef(null)

    const copyToClipboard = (e) => {
        textAreaRef.current.select()
        document.execCommand('copy')
        setCopySuccess('Copied!');
      }

    return (
        <Modal
                {...props}
                size="md"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header>
                        <Modal.Title id="contained-modal-title-vcenter" className="text-uppercase">
                            <h3 className="modal-title">here is your Subscription Code</h3>
                        </Modal.Title>
                    
                </Modal.Header>
            <Modal.Body>
                <div className="code-box text-center">
                    <SubCode className="m-2 subcode">
                        {
                            !!subscriptionCodeValue ? 
                            <input type="text" className="input-subscode" ref={textAreaRef} value={subscriptionCodeValue}
                                readOnly={true} />
                                : null
                        }
                    </SubCode> 
                    <p className='m-4'></p>
                    <button className="btn btn-primary copy m-3" onClick={copyToClipboard}>
                        <i className="fa fa-files-o m-r-xxs"></i> <span>{copySuccess}</span>
                    </button>
                </div>
            </Modal.Body>
            
      </Modal>        
    )
}

export default ModalComponent;