content: /***
   * Copyright 2017 - present Lynx Productions
   * 
   * 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.
   */
  
  // @ts-check
  
  import React from 'react';
  import { Link } from 'react-router-dom';
  import { Table, TableBody, TableRow, TableRowColumn } from 'material-ui/Table';
  import CopyToClipboard from 'react-copy-to-clipboard';
  import IconButton from 'material-ui/IconButton';
  import CopyIcon from 'material-ui/svg-icons/content/content-copy';
  import ArrowForwardIcon from 'material-ui/svg-icons/navigation/arrow-forward';
  
  export const LoginDetails = ({ loginDetails }) => {
    const loginDetailsLen = loginDetails.length;
  
    return (
      <Table selectable={false}>
        <TableBody showRowHover={true} displayRowCheckbox={false}>
          {loginDetails.map((password, i) => (
            <TableRow key={password.id}>
              <TableRowColumn>{password.name}</TableRowColumn>
              <TableRowColumn>{password.username}</TableRowColumn>
              <TableRowColumn style={{ overflow: 'visible', textAlign: 'right' }}>
                <CopyToClipboard text={password.password}>
                  <IconButton
                    tooltip="Copy password"
                    tooltipPosition={
                      i + 1 === loginDetailsLen ? 'top-center' : 'bottom-center'
                    }
                  >
                    <CopyIcon />
                  </IconButton>
                </CopyToClipboard>
                <Link to={`passwords/${password.id}`}>
                  <IconButton
                    tooltip="Edit"
                    tooltipPosition={
                      i + 1 === loginDetailsLen ? 'top-center' : 'bottom-center'
                    }
                  >
                    <ArrowForwardIcon />
                  </IconButton>
                </Link>
              </TableRowColumn>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    );
  };
  
  export default LoginDetails;
  