import * as React from "react";
import { CSSTransition } from 'react-transition-group';

import { Button, ButtonType, ButtonSize } from "../Button";
import { Image } from "../Image";
import { getImageSrc } from "../../utilities/image";

interface IInstructionsProps {
  mount: boolean;
  onClose: () => void;
  imagePrefix?: string;
}

export class Instructions extends React.Component<IInstructionsProps, {}> {
  public render() {
    return (
      <CSSTransition
        in={this.props.mount}
        timeout={300}
        classNames="instructions"
        unmountOnExit={true}
      >
        {state => (
          <div className="instructions">
            <div className="instructions__header">
              <h4>To Enable Location Services</h4>
              <h2>Go To:</h2>
            </div>
            <div className="instructions__content">
              <div className="instructions__instructionable">
                <Image src={getImageSrc(this.props.imagePrefix, "settings.png")} />
                <span className="instructions__instructionable-text">
                  Settings
                </span>
              </div>
              <div className="instructions__instructionable">
                <Image src={getImageSrc(this.props.imagePrefix, "privacy.png")} />
                <span className="instructions__instructionable-text">
                  Privacy
                </span>
              </div>
              <div className="instructions__instructionable">
                <Image src={getImageSrc(this.props.imagePrefix, "location.png")} />
                <span className="instructions__instructionable-text">
                  Location Services
                </span>
              </div>
              <div className="instructions__instructionable">
                <Image src={getImageSrc(this.props.imagePrefix, "safari.png")} />
                <span className="instructions__instructionable-text">
                  Safari Websites
                </span>
              </div>
              <div className="instructions__instructionable">
                <Image src={getImageSrc(this.props.imagePrefix, "check.png")} />
                <span className="instructions__instructionable-text">
                  Check
                </span>
              </div>
            </div>
            <div className="instructions__footer">
              <span className="instructions__completion-text">
                {"Once that's done, refresh this page!"}
              </span>
              <Button type={ButtonType.Light} size={ButtonSize.Large} text="Close" onClick={this.props.onClose} />
            </div>
          </div>
        )}
      </CSSTransition>
    )
  }
}