import React from 'react';
import { storiesOf } from '@storybook/react';
import { BooleanValue } from 'react-values'
import { ContentRow, Checkbox, Avatar, Link, ContextMenuButton } from 'asc-web-components';
import Section from '../../../.storybook/decorators/section';
import { Container, Row, Col } from 'reactstrap';

const users = [
  {
    id: '1',
    userName: 'Helen Walton',
    avatar: '',
    role: 'owner',
    status: 'normal',
    isHead: false,
    departments: [
      {
        title: 'Administration',
        action: () => console.log('Department action')
      }
    ],
    phones: [
      {
        title: '+5 104 6473420',
        action: () => console.log('Phone action')
      }
    ],
    emails: [
      {
        title: 'percival1979@yahoo.com',
        action: () => console.log('Email action')
      }
    ],
    contextOptions: [
      {key: 'key1', label: 'Send e-mail', onClick: () => console.log('Context action: Send e-mail')},
      {key: 'key2', label: 'Send message', onClick: () => console.log('Context action: Send message')},
      {key: 'key3', isSeparator: true },
      {key: 'key4', label: 'Edit', onClick: () => console.log('Context action: Edit')},
      {key: 'key5', label: 'Change password', onClick: () => console.log('Context action: Change password')},
      {key: 'key6', label: 'Change e-mail', onClick: () => console.log('Context action: Change e-mail')},
      {key: 'key7', label: 'Disable', onClick: () => console.log('Context action: Disable')}
    ]
  },
  {
    id: '2',
    userName: 'Nellie Harder',
    avatar: '',
    role: 'user',
    status: 'normal',
    isHead: true,
    departments: [
      {
        title: 'Development',
        action: () => console.log('Department action')
      }
    ],
    phones: [
      {
        title: '+1 716 3748605',
        action: () => console.log('Phone action')
      }
    ],
    emails: [
      {
        title: 'herta.reynol@yahoo.com',
        action: () => console.log('Email action')
      }
    ],
    contextOptions: [
      {key: 'key1', label: 'Send e-mail', onClick: () => console.log('Context action: Send e-mail')},
      {key: 'key2', label: 'Send message', onClick: () => console.log('Context action: Send message')},
      {key: 'key3', isSeparator: true },
      {key: 'key4', label: 'Edit', onClick: () => console.log('Context action: Edit')},
      {key: 'key5', label: 'Change password', onClick: () => console.log('Context action: Change password')},
      {key: 'key6', label: 'Change e-mail', onClick: () => console.log('Context action: Change e-mail')},
      {key: 'key7', label: 'Disable', onClick: () => console.log('Context action: Disable')}
    ]
  },
  {
    id: '3',
    userName: 'Alan Mason',
    avatar: '',
    role: 'admin',
    status: 'normal',
    isHead: true,
    departments: [
      {
        title: 'Administration',
        action: () => console.log('Department action')
      }
    ],
    phones: [
      {
        title: '+3 956 2064314',
        action: () => console.log('Phone action')
      }
    ],
    emails: [
      {
        title: 'davin_lindgr@hotmail.com',
        action: () => console.log('Email action')
      }
    ],
    contextOptions: [
      {key: 'key1', label: 'Send e-mail', onClick: () => console.log('Context action: Send e-mail')},
      {key: 'key2', label: 'Send message', onClick: () => console.log('Context action: Send message')},
      {key: 'key3', isSeparator: true },
      {key: 'key4', label: 'Edit', onClick: () => console.log('Context action: Edit')},
      {key: 'key5', label: 'Change password', onClick: () => console.log('Context action: Change password')},
      {key: 'key6', label: 'Change e-mail', onClick: () => console.log('Context action: Change e-mail')},
      {key: 'key7', label: 'Disable', onClick: () => console.log('Context action: Disable')}
    ]
  },
  {
    id: '4',
    userName: 'Michael Goldstein',
    avatar: '',
    role: 'guest',
    status: 'normal',
    isHead: false,
    departments: [
      {
        title: 'Visitors',
        action: () => console.log('Department action')
      }
    ],
    phones: [
      {
        title: '+7 715 6018678',
        action: () => console.log('Phone action')
      }
    ],
    emails: [
      {
        title: 'fidel_kerlu@hotmail.com',
        action: () => console.log('Email action')
      }
    ],
    contextOptions: [
      {key: 'key1', label: 'Send e-mail', onClick: () => console.log('Context action: Send e-mail')},
      {key: 'key2', label: 'Send message', onClick: () => console.log('Context action: Send message')},
      {key: 'key3', isSeparator: true },
      {key: 'key4', label: 'Edit', onClick: () => console.log('Context action: Edit')},
      {key: 'key5', label: 'Change password', onClick: () => console.log('Context action: Change password')},
      {key: 'key6', label: 'Change e-mail', onClick: () => console.log('Context action: Change e-mail')},
      {key: 'key7', label: 'Disable', onClick: () => console.log('Context action: Disable')}
    ]
  },
  {
    id: '5',
    userName: 'Robert Gardner',
    avatar: '',
    role: 'user',
    status: 'pending',
    isHead: false,
    departments: [
      {
        title: 'Pending',
        action: () => console.log('Department action')
      }
    ],
    phones: [
      {
        title: '+0 000 0000000',
        action: () => console.log('Phone action')
      }
    ],
    emails: [
      {
        title: 'robert_gardner@hotmail.com',
        action: () => console.log('Email action')
      }
    ],
    contextOptions: [
      {key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit')},
      {key: 'key2', label: 'Invite again', onClick: () => console.log('Context action: Invite again')},
      {key: 'key3', label: 'Delete profile', onClick: () => console.log('Context action: Delete profile')}
    ]
  },
  {
    id: '6',
    userName: 'Timothy Morphis',
    avatar: '',
    role: 'user',
    status: 'disabled',
    isHead: false,
    departments: [
      {
        title: 'Disabled',
        action: () => console.log('Department action')
      }
    ],
    phones: [
      {
        title: '+9 641 1689548',
        action: () => console.log('Phone action')
      }
    ],
    emails: [
      {
        title: 'timothy_j_morphis@hotmail.com',
        action: () => console.log('Email action')
      }
    ],
    contextOptions: [
      {key: 'key1', label: 'Edit', onClick: () => console.log('Context action: Edit')},
      {key: 'key2', label: 'Reassign data', onClick: () => console.log('Context action: Reassign data')},
      {key: 'key3', label: 'Delete personal data', onClick: () => console.log('Context action: Delete personal data')},
      {key: 'key4', label: 'Delete profile', onClick: () => console.log('Context action: Delete profile')}
    ]
  }
];

const peopleContent = (userName, department, phone, email, headDepartment, status) => {
  return(
  <Container fluid={true}>
    <Row className="justify-content-start no-gutters">
      <Col className="col-12 col-sm-12 col-lg-4 text-truncate">
        <Link style={status === 'pending' ? {color: '#A3A9AE'} : {color: '#333333'}} type='action' title={userName} text={userName} isBold={true} fontSize={15} onClick={()=> console.log('User name action')} />
      </Col>
      <Col className={`${headDepartment ? 'col-3': 'col-auto' } col-sm-auto col-lg-2 text-truncate`}>
        <Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}} type='action' isHovered title={headDepartment ? 'Head of department' : ''} text={headDepartment ? 'Head of department' : ''}  onClick={() => console.log('Head of department action')} />
      </Col>
      <Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
        {headDepartment && <span className="d-lg-none" style={{margin: '0 4px'}}>{department.title ? '|' : ''}</span>}
        <Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}} type='action' isHovered title={department.title} text={department.title} onClick={department.action} />
      </Col>
      <Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
        {department.title && <span className="d-lg-none" style={{margin: '0 4px'}}>{phone.title ? '|' : ''}</span>}
        <Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}}  type='action' title={phone.title} text={phone.title} onClick={phone.action} />
      </Col>
      <Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
        {phone.title && <span className="d-lg-none" style={{margin: '0 4px'}}>{email.title ? '|' : ''}</span>}
        <Link style={status === 'pending' ? {color: '#D0D5DA'} : {color: '#A3A9AE'}} type='action' isHovered title={email.title} text={email.title} onClick={email.action} />
      </Col>
    </Row>
  </Container>
  )};

storiesOf('EXAMPLES|ContentRow', module)
  .add('people row', () => {
   
    return(
      <Section>
        {users.map(user => {
          return (
            <ContentRow status={user.status}
                        checkBox={
                        <BooleanValue>
                          {({ value, toggle }) => (
                            <Checkbox isChecked={value} 
                                      onChange={e => {
                                      console.log('Item with id: '+ e.target.value + ' Checked!')
                                      toggle(e.target.checked);
                                      }} 
                                      isDisabled={false} 
                                      value={user.id} 
                                      id={user.id} />)}
                        </BooleanValue>
                        }
                        avatar={
                          <Avatar size='small' 
                                  role={user.role} 
                                  source={user.avatar}
                                  userName={user.userName} />
                        }
                        contextButton={
                          <ContextMenuButton direction='right' 
                                            getData={() => user.contextOptions} />
                        }
              >
                {peopleContent(user.userName, user.departments[0], user.phones[0], user.emails[0], user.isHead, user.status)}
              </ContentRow>
            );
        })}
      </Section>
    );
  });