const React = require('react');
const Modal = require('@andes/modal');
const Autocomplete = require('@andes/autocomplete');
const TextField = require('@andes/textfield');
const Dropdown = require('@andes/dropdown');
const Tag = require('@andes/tag');
const Button = require('@andes/button');

const { DropdownItem, DropdownGroup } = Dropdown;

const List = require('@andes/list');
const { ListItem } = List;

const Card = require('@andes/card');

const AuthorizationsDescriptionModal = () => {
  const [show, setShow] = React.useState(false);
  const [authorizationId, setAuthorizationId] = React.useState(0);
  const [text, setText] = React.useState('');

  const displayDescriptionModal = (id, aText) => {
    setText(aText);
    setAuthorizationId(id);
    setShow(true);
  };

  const closeModal = () => {
    setShow(false);
  };

  const DescriptionModal = () => (
    <Modal
      className={'authorizations-modal authorizations-modal-description'}
      title={'Description'}
      visible={show}
      onClose={() => closeModal()}
    >
      <span>{text}</span>
    </Modal>);
  return { displayDescriptionModal, DescriptionModal };
};

const AuthorizationsConfirmationModal = () => {
  const [show, setShow] = React.useState(false);
  const [authorizationId, setAuthorizationId] = React.useState(0);
  const [actionText, setActionText] = React.useState('');

  const displayConfirmationModal = (id, action) => {
    setActionText(action);
    setAuthorizationId(id);
    setShow(true);
  };

  const closeModal = () => {
    setActionText('');
    setAuthorizationId(0);
    setShow(false);
  };

  const ConfirmationModal = () => (
    <Modal
      className={'authorizations-modal authorizations-modal-confirmation'}
      title={`${actionText && (actionText.charAt(0).toUpperCase() + actionText.slice(1))} Authorization`}
      visible={show}
      onClose={() => closeModal()}
      actions={{
        buttonFilled: <Button modifier="filled">Approve</Button>,
        buttonTransparent: <Button modifier="transparent">Reject</Button>,
      }}
    >
      <span>{`Are you sure you want to ${actionText} this authorization?`}</span>
    </Modal>);
  return { displayConfirmationModal, ConfirmationModal };
};

const CreateNewAuthorizationModal = () => {
  const [show, setShow] = React.useState(false);
  const [approvers, setApprovers] = React.useState([]);

  const displayCreateNewAuthorizationModal = (approverCandidates) => {
    console.log(approverCandidates);
    setApprovers(approverCandidates);
    setShow(true);
  };

  const closeModal = () => {
    setShow(false);
  };


  const TextFieldWithListSelector = (suggestionsList) => {
    const [selectedValues, setSelectedValues] = React.useState('');
    console.log(suggestionsList);
    const onSelect = (e, value) => {

      if ( !selectedValues.includes(value.id) ) {
        setSelectedValues((values) => { values.push(value.id); });
      }
      console.log('Autosuggest value:', value);
    };
    const onChange = (e) => {
      console.log('Textfield value:', e.target.value);
    };

    return (
      <React.Fragment>
        { selectedValues }
        <Autocomplete suggestions={suggestionsList} onSelect={onSelect} >
          <TextField label={'Approver Candidates'} onChange={onChange} />
        </Autocomplete>
      </React.Fragment>
    );
  };

  const generateTextFieldWithListSelector = () => {
    if (!approvers) {
      return <React.Fragment />;
    }
    return TextFieldWithListSelector(approvers.map(approverCandidate => ({ name: `${approverCandidate.username} - (${approverCandidate.email}`, id: approverCandidate.username })));
  };


  const NewAuthorizationModal = () => (
    <Modal
      className={'authorizations-modal authorizations-modal-create'}
      title={'Create Authorization'}
      visible={show}
      onClose={() => closeModal()}
    >
      <TextField label="Message" message={'why ?'} />
      <div className="spacer" />
      <Dropdown label="Resource" value="deployment" type="form" /*onChange={this.onChangeHandler} */>
        <DropdownItem value="deployment" primary="Deployment" />
        <DropdownItem value="migration" primary="" disabled />
      </Dropdown>
      <div className="spacer" />


      {generateTextFieldWithListSelector()}

      {/* <List className="scrolleable-list" size="compact" type="dropdown" selectable>
        {approvers.map(approver => (
          <ListItem key={approver} primary={approver} selected />
        ))}
      </List> */}

      {/* message - TF
      Resource - Dropdown ... only one option deployment
      Please, choose approvers to notify - DropDown, select more than one
      Choose an authorization time range
      DateChooser (from)
      DateChooser (to)

      Notes:
        - This will send a confirmation email to your chosen approver.
        - Authorizations are requested per application, not per service. */}

    </Modal>);
  return { displayCreateNewAuthorizationModal, NewAuthorizationModal };
};

module.exports = { AuthorizationsDescriptionModal, CreateNewAuthorizationModal, AuthorizationsConfirmationModal };