import React, { PropTypes } from 'react'
import {
  NavBar,
  Icon,
  Chat,
  HeadPortrait,
  ChatBubble,
  ToolBar,
  Input,
  Button,
} from '../../../index'
// import styles from './index.css'
const meImage = require('../../assets/imgs/me.jpg')

const propTypes = {
  className: PropTypes.string,
}

const CustomChat = ({ className }) =>
  <div className={`${className}`}>
    <NavBar title="Chat">
      <NavBar.Item to="/home">
        <Icon type="chevron-left" />MeetUI
      </NavBar.Item>
    </NavBar>

    <Chat>
      <Chat.Item>
        <HeadPortrait image={meImage} />
        <ChatBubble>Hi, I'm zhiquan_yu, who are you?</ChatBubble>
      </Chat.Item>
      <Chat.Item align="right">
        <HeadPortrait image={meImage} />
        <ChatBubble align="right">My name is Jane.</ChatBubble>
      </Chat.Item>
      <Chat.Item>
        <HeadPortrait image={meImage} />
        <ChatBubble>Hi</ChatBubble>
      </Chat.Item>
      <Chat.Item>
        <HeadPortrait image={meImage} />
        <ChatBubble>Hi</ChatBubble>
      </Chat.Item>
      <Chat.Item>
        <HeadPortrait image={meImage} />
        <ChatBubble>Hi, I'm zhiquan_yu, who are you?</ChatBubble>
      </Chat.Item>
      <Chat.Item align="right">
        <HeadPortrait image={meImage} />
        <ChatBubble align="right">My name is Jane.</ChatBubble>
      </Chat.Item>
      <Chat.Item>
        <HeadPortrait image={meImage} />
        <ChatBubble>Hi, I'm zhiquan_yu, who are you?</ChatBubble>
      </Chat.Item>
      <Chat.Item align="right">
        <HeadPortrait image={meImage} />
        <ChatBubble align="right">My name is Jane.</ChatBubble>
      </Chat.Item>
      <Chat.Item>
        <HeadPortrait image={meImage} />
        <ChatBubble>Hi, I'm zhiquan_yu, who are you?</ChatBubble>
      </Chat.Item>
      <Chat.Item align="right">
        <HeadPortrait image={meImage} />
        <ChatBubble align="right">My name is Jane.</ChatBubble>
      </Chat.Item>
      <Chat.Item>
        <HeadPortrait image={meImage} />
        <ChatBubble>Hi, I'm zhiquan_yu, who are you?</ChatBubble>
      </Chat.Item>
      <Chat.Item align="right">
        <HeadPortrait image={meImage} />
        <ChatBubble align="right">My name is Jane.</ChatBubble>
      </Chat.Item>
    </Chat>

    <ToolBar>
      <Input type="text" placeholder="new chat" />
      <Button>发送</Button>
    </ToolBar>
  </div>

CustomChat.propTypes = propTypes

export default CustomChat