import { Component } from "preact";

import showcaseJson from "../../assets/showcase.json";

// Main content for proejct page for the app

export default class Project extends Component {
  componentDidMount() {
    // Set that we are loading
    this.setState({
      loading: true
    });

    // Check if we have pre-render data
    let preRenderProject = undefined;
    const preRenderScript = document.querySelector(
      'script[type="__PREACT_CLI_DATA__"]'
    );
    if (preRenderScript) {
      let preRenderScriptJson = JSON.parse(preRenderScript.innerHTML);
      if (preRenderScriptJson.preRenderData) {
        preRenderProject = preRenderScriptJson.preRenderData;
      }
    }

    if (
      preRenderProject &&
      preRenderProject.project &&
      preRenderProject.project.key === this.props.id
    ) {
      this.setState({
        loading: false,
        project: preRenderProject.project,
        html: preRenderProject.html
      });
    } else {
      // Fetch the project using props and the assets
      const fetchProjectHtmlTask = async () => {
        const fetchResponse = await fetch(
          `/assets/showcase/${this.props.id}.html`
        );
        const projectHtml = await fetchResponse.text();

        const project = showcaseJson[this.props.id];
        document.title = `Made with WebAssembly - ${project.name}`;

        this.setState({
          loading: false,
          project: project,
          html: projectHtml
        });
      };
      fetchProjectHtmlTask().catch(e => {
        console.error(e);
        this.setState({
          loading: false,
          error: true
        });
      });
    }
  }

  componentWillUnmount() {
    document.title = `Made with WebAssembly`;
  }

  render() {
    let view = "";

    if (this.state.loading) {
      view = (
        <div class="project__loading">
          <div class="donut"></div>
        </div>
      );
    } else if (this.state.error) {
      view = <h1>Error fetching the project...</h1>;
    } else if (this.state.project) {
      view = (
        <div class="project__view">
          <h1>{this.state.project.name}</h1>
          <div class="project__view__links">
            {this.state.project.website ? (
              <a href={this.state.project.website}>Website</a>
            ) : (
              ""
            )}
            {this.state.project.source_url ? (
              <a href={this.state.project.source_url}>Source Code</a>
            ) : (
              ""
            )}
          </div>
          <div dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
          <div>
            <b>
              Date Added:{" "}
              {new Date(
                this.state.project.createdDate
              ).toLocaleDateString(undefined, { dateStyle: "short" })}
            </b>
          </div>
        </div>
      );
    }

    return <div class="project">{view}</div>;
  }
}
