content: /* 
    用于article 和 favorited articles
  */
  import React from 'react';
  import styled from 'styled-components';
  import PropTypes from 'prop-types';
  import { notify, Modal } from 'see-common-components';
  import { connect } from 'react-redux';
  import {
    unLikeArticle,
    setCurrSlug,
    updateMyArticle,
    deleteMyArticle
  } from '../actions';
  import {
    getCurrSlug,
    getCommonArticleStateIsFetching,
    getCommonArticleStateMessage
  } from '../reducers';
  import {
    PrimaryButton,
    Input,
    TextArea,
    DangerButton,
    CancelButton
  } from '../styles';
  
  const Container = styled.div`width: 50%;`;
  
  const BasicBtnSettings = () => `
    padding: 10px 15px;
    font-size: 1em;
  `;
  
  const ModifyBtn = PrimaryButton.extend`
    margin-right: 10px;
    ${BasicBtnSettings()};
  `;
  
  const DeleteBtn = DangerButton.extend`
    ${BasicBtnSettings};
    margin-right: 10px;
  `;
  
  const UnFavBtn = DangerButton.extend`
    ${BasicBtnSettings};
    padding: 10px 10px;
  `;
  
  const SubmitBtn = ModifyBtn.extend``;
  
  const CancelBtn = CancelButton.extend`${BasicBtnSettings()};`;
  
  const DeleteModalTitle = styled.h2`font-size: 1.2em;`;
  
  const DeleteModalBtns = styled.div`
    display: flex;
    justify-content: center;
  `;
  
  class MyArticlePreview extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isModifyModalVisible: false,
        isDeleteModalVisible: false,
        title: props.title,
        body: props.content,
        description: props.description,
        tagList: props.tags
      };
    }
    static propTypes = {
      isFavoritedArticles: PropTypes.bool
    };
    static defaultProps = {
      isFavoritedArticles: false
    };
    handleInputChange = key => e => {
      let value = e.target.value;
  
      this.setState({ [key]: value });
    };
    handleUnFavBtnClick = slug => () => {
      const { unLikeArticle } = this.props;
      notify('unlike success');
      unLikeArticle(slug);
    };
    handleModifyBtnClick = slug => () => {
      const { setCurrSlug } = this.props;
      this.setState({ isModifyModalVisible: true });
      setCurrSlug(slug);
    };
    handleSubmitModify = slug => e => {
      const { updateMyArticle } = this.props;
      e.preventDefault();
      const { title, body, description, tagList } = this.state;
      const list = tagList.split(' ');
      updateMyArticle(slug, title, description, body, list);
    };
    handleSubmitDelete = slug => e => {
      const { deleteMyArticle } = this.props;
      deleteMyArticle(slug);
    };
    componentDidUpdate(prevProps, prevState) {
      // 通用modal
      if (
        this.props.commonIsFetching === false &&
        this.props.commonIsFetching !== prevProps.commonIsFetching
      ) {
        this.setState({
          isModifyModalVisible: false,
          isDeleteModalVisible: false
        });
      }
      // 成功删除
    }
    handleDeleteBtnClick = slug => e => {
      const { setCurrSlug } = this.props;
      this.setState({ isDeleteModalVisible: true });
      setCurrSlug(slug);
      // deleteMyArticle(slug);
    };
    handleCancelBtnClick = e => {
      e.preventDefault();
      this.setState({ isModifyModalVisible: false });
    };
    render() {
      const {
        isFavoritedArticles,
        slug,
        title,
        content,
        commonIsFetching,
        tags,
        time
      } = this.props;
      return (
        <Container>
          <Modal
            isVisible={this.state.isModifyModalVisible}
            onCloseClick={() => this.setState({ isModifyModalVisible: false })}
          >
            <form>
              <Input
                value={this.state.title}
                onChange={this.handleInputChange('title')}
                placeholder="title"
              />
              <Input
                value={this.state.description}
                onChange={this.handleInputChange('description')}
                placeholder="article description"
              />
              <TextArea
                value={this.state.body}
                onChange={this.handleInputChange('body')}
                placeholder="contents"
              />
              <Input
                value={this.state.tagList}
                onChange={this.handleInputChange('tagList')}
                placeholder="tags"
              />
              <SubmitBtn
                type="submit"
                onClick={this.handleSubmitModify(slug)}
                disabled={commonIsFetching}
              >
                update
              </SubmitBtn>
              <CancelBtn onClick={this.handleCancelBtnClick}>cancel</CancelBtn>
            </form>
          </Modal>
          <Modal
            isVisible={this.state.isDeleteModalVisible}
            onCloseClick={() => this.setState({ isDeleteModalVisible: false })}
            style={{ minWidth: 0, minHeight: 0 }}
          >
            <div>
              <DeleteModalTitle>
                Are you sure delete this article?
              </DeleteModalTitle>
              <DeleteModalBtns>
                <DeleteBtn onClick={this.handleSubmitDelete(slug)}>
                  delete
                </DeleteBtn>
                <CancelBtn
                  onClick={() => this.setState({ isDeleteModalVisible: false })}
                >
                  cancel
                </CancelBtn>
              </DeleteModalBtns>
            </div>
          </Modal>
          <h2>{title}</h2>
          <p>{content}</p>
          <div>
            <time>{new Date(time).toDateString()}</time>
            <p>tags: {tags.join(' ')}</p>
          </div>
          <div>
            {isFavoritedArticles ? (
              <UnFavBtn onClick={this.handleUnFavBtnClick(slug)}>
                Unfavorited
              </UnFavBtn>
            ) : (
              <div>
                <ModifyBtn onClick={this.handleModifyBtnClick(slug)}>
                  modify
                </ModifyBtn>
                <DeleteBtn
                  onClick={this.handleDeleteBtnClick(slug)}
                  disabled={commonIsFetching}
                >
                  delete
                </DeleteBtn>
              </div>
            )}
          </div>
        </Container>
      );
    }
  }
  
  const mapStateToProps = state => ({
    currSlug: getCurrSlug(state),
    errorMessage: getCommonArticleStateMessage(state),
    commonIsFetching: getCommonArticleStateIsFetching(state)
  });
  
  export default connect(mapStateToProps, {
    unLikeArticle,
    updateMyArticle,
    deleteMyArticle,
    setCurrSlug
  })(MyArticlePreview);
  