import * as React from 'react';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import {
  Persona,
  PersonaSize,
  PersonaPresence
} from 'office-ui-fabric-react/lib/Persona';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Label } from 'office-ui-fabric-react/lib/Label';
import { TestImages } from '../../../common/TestImages';

import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
const exampleStyles: any = exampleStylesImport;

const examplePersona = {
  imageUrl: TestImages.personaFemale,
  imageInitials: 'AL',
  primaryText: 'Annie Lindqvist',
  secondaryText: 'Software Engineer',
  tertiaryText: 'In a meeting',
  optionalText: 'Available at 4:00pm'
};

export class PersonaBasicExample extends React.Component<{}, {
  renderPersonaDetails?: boolean;
}> {
  constructor(props: {}) {
    super(props);
    this.state = {
      renderPersonaDetails: true
    };
  }

  public render() {
    let { renderPersonaDetails } = this.state;

    return (
      <div>
        <div>
          <Checkbox
            label='Include persona details'
            checked={ renderPersonaDetails }
            onChange={ this._onChange }
          />
        </div>

        <Label className={ exampleStyles.exampleLabel }>Size 10 Persona, with no presence</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size10 }
          hidePersonaDetails={ !renderPersonaDetails }
        />
        <Label className={ exampleStyles.exampleLabel }>Size 10 Persona, with presence</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size10 }
          presence={ PersonaPresence.offline }
          hidePersonaDetails={ !renderPersonaDetails }
        />
        <Label className={ exampleStyles.exampleLabel }>Size 24 Persona</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size24 }
          presence={ PersonaPresence.online }
          hidePersonaDetails={ !renderPersonaDetails }
        />
        <Label className={ exampleStyles.exampleLabel }>Size 28 Persona</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size28 }
          presence={ PersonaPresence.online }
          hidePersonaDetails={ !renderPersonaDetails }
        />
        <Label className={ exampleStyles.exampleLabel }>Size 32 Persona</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size32 }
          presence={ PersonaPresence.online }
          hidePersonaDetails={ !renderPersonaDetails }
        />

        <Label className={ exampleStyles.exampleLabel }>Size 40 Persona</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size40 }
          presence={ PersonaPresence.away }
          hidePersonaDetails={ !renderPersonaDetails }
        />
        <Label className={ exampleStyles.exampleLabel }>Size 48 Persona (default) </Label>
        <Persona
          { ...examplePersona }
          hidePersonaDetails={ !renderPersonaDetails }
          presence={ PersonaPresence.busy }
        />

        <Label className={ exampleStyles.exampleLabel }>Size 72 Persona</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size72 }
          presence={ PersonaPresence.dnd }
          hidePersonaDetails={ !renderPersonaDetails }
        />
        <Label className={ exampleStyles.exampleLabel }>Size 100 Persona</Label>
        <Persona
          { ...examplePersona }
          size={ PersonaSize.size100 }
          presence={ PersonaPresence.blocked }
          hidePersonaDetails={ !renderPersonaDetails }
        />
      </div >
    );
  }

  @autobind
  private _onChange(ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined, checked: boolean | undefined): void {
    this.setState({ renderPersonaDetails: checked });
  }
}