/* eslint-disable */

import React from 'react';
import { Avatar, Button } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import styled, { ThemeProvider } from 'styled-components';

/* utils */
import { btnReboot, btnHoverTransparentToMajor } from '@/vendor/style-utils';

/* assets */
import vars from '@/stylesheets/variables.runtime';

/* actions */

/* components */

/* self-defined-components */

import Style from '@/stylesheets/modules/InvitedTesterList';

const StyledInvitedTesterItem = styled.div`
  display: flex;
  align-items: center;
  max-height: 80px;
  background-color: white;
  padding: 30px 20px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 15px;
  color: ${({ theme }) => theme.colors.gray800};
  border: 1px solid rgba(0, 0, 0, 0.125);

  &:hover {
    border: 1px solid ${({ theme }) => theme.colors.major};
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3);
  }
`;

const StyledInputText = styled.input`
  border: 0;
  border-color: transparent;
  font-size: 13px;
  padding: 0;
  width: 100%;
  caret-color: ${({ theme }) => theme.colors.major};

  &:hover,
  &:focus {
    outline: 0;
    box-shadow: none;
  }
`
const StyledSaveButton = styled(Button)`
  ${btnReboot}
  ${btnHoverTransparentToMajor}
  font-size: 12px !important;
  border-radius: 20px !important;
  margin-left: 10px !important;
  width: 44px !important;
  height: 20px !important;
`

const IconButton = styled.button`
  ${btnReboot}
  color: #cccccc;
  font-size: 16px;
  padding: 0;
`

class InvitedTesterItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isEditMode: false,
    }

    this.inputTextRef = React.createRef();
    this.handleOnClick = this.handleOnClick.bind(this);
    this.handleOnSave = this.handleOnSave.bind(this);
    this.handleOnDelete = this.handleOnDelete.bind(this);
  }

  handleOnSave() {
    this.props.saveNote(this.props.invitedTester.id, this.inputTextRef.current.value.trim());
    this.setState({
      isEditMode: false
    })
  }

  handleOnDelete() {
    console.log('this.props.invitedTester.id', this.props.invitedTester.id)
    this.props.deleteNote(this.props.invitedTester.id)
  }

  handleOnClick() {
    this.setState(prevState => {
      return {
        isEditMode: !prevState.isEditMode
      }
    })
  }

  render() {

    const { invitedTester } = this.props;

    return (
      <ThemeProvider theme={vars}>
        <StyledInvitedTesterItem>
          <div style={{ width: 140, marginRight: 30 }}>
            <Avatar size={30} src={invitedTester.userAvatar} className={Style.avatar} >
              {invitedTester.name.slice(0, 1)}
            </Avatar>
            { invitedTester.name || 'No Personal Info' }
          </div>

          <div style={{ width: 154, marginRight: 30 }}>
            { invitedTester.email }
          </div>

          <div style={{ width: 200, marginRight: 30 }}>
          { invitedTester.invitedAt }
          </div>

          <div style={{ width: 482, marginRight: 30 }}>

            {
              this.state.isEditMode ? (
                <div className="d-flex align-items-center">
                  <StyledInputText type="text" placeholder="Notes..."
                    ref={this.inputTextRef}
                    defaultValue={ invitedTester.note }
                  />

                  <IconButton type="button" onClick={this.handleOnClick}>
                    <FontAwesomeIcon
                      icon={['fas', 'times']}
                      style={{ fontSize: 12 }}
                    />
                  </IconButton>

                  <StyledSaveButton onClick={this.handleOnSave}>Save</StyledSaveButton>
                </div>
              ) : (
                <div className="d-flex justify-content-between">
                  { invitedTester.note ? invitedTester.note : 'Notes...' }
                  <IconButton type="button" onClick={this.handleOnClick}>
                    <FontAwesomeIcon
                      icon={['fas', 'pen']}
                      style={{ fontSize: 14 }}
                    />
                  </IconButton>
                </div>
              )
            }
          </div>

          <div className="text-right">
            <IconButton type="button" onClick={this.handleOnDelete}>
              <FontAwesomeIcon
                icon={['far', 'trash-alt']}
              />
            </IconButton>
          </div>
        </StyledInvitedTesterItem>
      </ThemeProvider>
    )
  }
}

export default InvitedTesterItem;