/*-
 * ============LICENSE_START=======================================================
 * ONAP POLICY-CLAMP
 * ================================================================================
 * Copyright (C) 2021 AT&T Intellectual Property. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END============================================
 * ===================================================================
 *
 */

import React from 'react'
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import styled from 'styled-components';
import Alert from 'react-bootstrap/Alert';
import { Input, InputLabel, Button, SvgIcon } from "@material-ui/core";
import PublishIcon from '@material-ui/icons/Publish';
import PolicyService from '../../../api/PolicyService';

const ModalStyled = styled(Modal)`
  background-color: transparent;
`

const StyledMessagesDiv = styled.div`
  overflow: auto;
  max-height: 300px;
`


export default class PolicyToscaFileSelector extends React.Component {

  state = {
    show: this.props.show,
    alertMessages: [],
  }

  constructor(props, context) {
    super(props, context);
    this.handleClose = this.handleClose.bind(this);
    this.onFileChange = this.onFileChange.bind(this);
  }

  componentDidUpdate(prevProps) {
    if (this.props.show !== this.state.show) {
      this.setState({ show: this.props.show });
    }
  }

  handleClose() {
    this.props.disableFunction();
    this.setState({ alertMessages: [] });
  }

  onFileChange(target) {
    this.setState({ alertMessages: [] });
    target.currentTarget.files.forEach(file => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (content) => {
        PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
          if (typeof (respModelCreate) === "undefined") {
            //it indicates a failure
            this.setState(state => {
              return {
                alertMessages: [...state.alertMessages, (<Alert variant="danger"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Creation Failure</p>
                  <hr/>
                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
              };
            });
          } else {
            this.props.toscaTableUpdateFunction();
            this.setState(state => {
              return {
                alertMessages: [...state.alertMessages, (<Alert variant="success"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Created Successfully</p>
                  <hr/>
                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
              };
            });
          }
        });
      };
    });

  }

  render() {
    return (
      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
        <Modal.Header closeButton>
          <Modal.Title>Create New Policy Tosca Model</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form.Group as={ Row } controlId="formPlaintextEmail">
            <Col sm="10">
              <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={ { display: 'none' } } onChange={ this.onFileChange }/>
              <label htmlFor={ 'fileUploadButton' }>
                <Button color="primary" variant="contained" component="span"
                        startIcon={
                          <SvgIcon fontSize="small">
                            <PublishIcon/>
                          </SvgIcon>
                        }>
                  Upload Files
                </Button>
                <p>(Only YAML files are supported)</p>
              </label>
              <StyledMessagesDiv>
                { this.state.alertMessages }
              </StyledMessagesDiv>
            </Col>
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
        </Modal.Footer>
      </ModalStyled>
    );
  }
}