import React, { Component } from "react";
import { Loader, Icon, Item } from "semantic-ui-react";
import { Link } from "@reach/router";
import Moment from "react-moment";
import "moment/locale/es";

class ThreadList extends Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: true, threadList: [] };
  }

  componentDidMount() {
    const { dir } = this.props;
    fetch(
      `https://bienvenidoainternet.org/cgi/api/list?dir=${dir}&replies=0&limit=30&nohtml=1`
    )
      .then(response => {
        return response.json();
      })
      .then(resource => {
        this.setState({ threadList: resource.threads, isLoading: false });
      });
  }

  render() {
    const { dir, boardList } = this.props;
    const { threadList, isLoading } = this.state;

    const currentBoard = boardList.find(board => {
      return board.dir === dir;
    });

    if (isLoading) {
      return (
        <Loader active centered="true">
          Cargando lista de hilos ...
        </Loader>
      );
    }

    const stripHtml = RegExp(
      /(<script(\s|\S)*?<\/script>)|(<style(\s|\S)*?<\/style>)|(<!--(\s|\S)*?-->)|(<\/?(\s|\S)*?>)/g
    );

    return (
      <Item.Group divided>
        {threadList.map((thread, index) => {
          return (
            <Item key={index}>
              {currentBoard.allow_images === 1 && (
                <Item.Image
                  size="tiny"
                  src={`https://bienvenidoainternet.org/${dir}/thumb/${thread.thumb}`}
                />
              )}
              <Item.Content verticalAlign="middle">
                <Item.Header as={Link} to={`/${dir}/read/${thread.id}`}>
                  {thread.subject}
                </Item.Header>
                <Item.Meta>
                  <span className="date">
                    <Moment fromNow unix date={thread.timestamp} />
                  </span>
                </Item.Meta>
                <Item.Description>
                  {thread.message.replace(stripHtml, "").substring(0, 200) +
                    " ..."}
                </Item.Description>
                <Item.Extra>
                  <Icon name="reply" />
                  {thread.total_replies} Respuestas
                </Item.Extra>
              </Item.Content>
            </Item>
          );
        })}
      </Item.Group>
    );
  }
}

export default ThreadList;