import * as React from 'react';
import { Props, State } from './type';
import { Container, Divider } from './index.style';
import { ItemType, isShareReadItem } from './type';
import { ShareReadItem } from './components/shareread-item';
import { BookItem } from './components/book-item';

export class SnailShareReadNew extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();
  /**
   * 显示所有共读项
   */
  public showAll() {
    this.setState({
      showAll: true,
    })
  }
  public render() {
    const { style, shareReadList, isEdit, showCount, } = this.props;
    const { showAll } = this.state;
    // console.log('shareReadList', shareReadList, style);
    return (
      <Container style={{...style}}>
        {
          shareReadList.length ? 
            <div>
              <div className="list">
                {
                  shareReadList.map((item: ItemType, index) => {
                    if(showCount > 0 && showCount < shareReadList.length && !showAll) {
                      return index < showCount ? (
                        <div key={item.id}>
                          {
                            isShareReadItem(item)
                              ? <ShareReadItem
                                  isEdit={isEdit}
                                  {...item}
                                />
                              : <BookItem 
                                  isEdit={isEdit}
                                  {...item}
                                />

                          }
                          { index < showCount - 1 ? <Divider /> : null}
                        </div>
                      ) : null
                    } else {
                      return (
                        <div key={item.id}>
                          {
                            isShareReadItem(item)
                              ? <ShareReadItem
                                  isEdit={isEdit}
                                  {...item}
                                />
                              : <BookItem 
                                  isEdit={isEdit}
                                  {...item}
                                />

                          }
                          { index !== shareReadList.length - 1 ? <Divider /> : null}
                        </div>
                      )
                    }
                  })
                }
              </div>
              {
                showCount > 0 && showCount < shareReadList.length && !showAll 
                  ? <div className="more" onClick={this.showAll.bind(this)}></div>
                  : null
              }
            </div>
            :
            isEdit && <div>蜗牛共读2021版</div>
        }
      </Container>
    )
  }
}