import * as React from 'react';
import {ChangeEvent, Component, FormEvent} from 'react';
import {Nav, NavLink} from 'reactstrap';
import {InputText} from './InputText';
import {
  Button,
  Col,
  DangerZone,
  Form,
  FormActions,
  FormGroup,
  FormImages,
  Icon,
  Input,
  JsonDebugger,
  Label,
  Layout,
  Page,
  PageBody,
  PageHeader,
  PageLoadingIndicator,
  Row,
  Snackbar,
  UncontrolledTooltip,
  UserMenu,
  UserMenuImage} from './../../../components';

import './../../styles/FormExample';

const drawerContent = (
  <Nav vertical>
    <NavLink
      className="toggle-drawer active"
      href="#"
    >
      Link 1
    </NavLink>

    <NavLink
      className="toggle-drawer"
      href="#"
    >
      Link 2
    </NavLink>
  </Nav>
);

const userMenu = (
  <UserMenu
    userImage={
      <UserMenuImage
        imageUrl="https://s.gravatar.com/avatar/73e74124b7261376a2686fa5d1ecd9bd?s=480&r=pg"
        userName="Danilo Barros"
      />
    }
  >
    <div>
      <div className="d-block">
        <strong>Danilo Barros</strong>
      </div>
      <div className="d-block">danilo@beakyn.com</div>
      <div className="d-block">
        <a className="dropdown-menu-link" href="#">Logout</a>
      </div>
      <div className="dropdown-divider" />
      <div className="d-block">
        <small>v1.3.1</small>
      </div>
    </div>
  </UserMenu>
);

const panelImages = [
  {
    id: 'panels/AT0004009/pge6ca0esj8la29r59uc',
    url: 'https://res.cloudinary.com/ofm/image/upload/v1498839600/panels/AT0004009/pge6ca0esj8la29r59uc.jpg',
  },
  {
    id: 'panels/AT0004009/267vebommw4rs11rva8w',
    url: 'https://res.cloudinary.com/ofm/image/upload/v1498839611/panels/AT0004009/267vebommw4rs11rva8w.jpg',
  },
  {
    id: 'panels/AT0004009/xwaa2nq7nopvexdh1vy1',
    url: 'https://res.cloudinary.com/ofm/image/upload/v1498839621/panels/AT0004009/xwaa2nq7nopvexdh1vy1.jpg',
  },
  {
    id: 'panels/AT0004009/6zwsj1v1xmscpgbrrx6x',
    url: 'https://res.cloudinary.com/ofm/image/upload/v1498839640/panels/AT0004009/6zwsj1v1xmscpgbrrx6x.jpg',
  },
];

const marketingImage = 'http://mapweb.outfrontmedia.com/handlers/image.ashx?t=photo&h=360&m=AT&p=0004009A';
const mapImage = 'https://maps.googleapis.com/maps/api/staticmap?center=33.75699731002042,-84.38538540244673&zoom=17&size=640x640&maptype=roadmap&markers=color:red|label:P|33.75699731002042,-84.38538540244673&path=color:0xff0000ff|weight:3|33.75699731002042,-84.38538540244673|33.756997308841854,-84.38592607930376&path=color:0x7f20d0|fillcolor:0x7f20d033|weight:3|33.75699632559081,-84.38538685441017|33.75712901009018,-84.38549011945724|33.75712789509524,-84.38592866063118|33.75708775526785,-84.38592463731766|33.75707995029922,-84.38619822263718|33.75704761542162,-84.38617944717407|33.75639199527321,-84.3861848115921|33.75640760533502,-84.38605070114136|33.75649011561446,-84.3860574066639|33.75647785057795,-84.38599169254303|33.75648008058473,-84.38598901033401|33.75646224052893,-84.38554644584656|33.75661611088797,-84.38555181026459|33.75663395091174,-84.3853747844696|33.75697291065784,-84.38538551330566|33.75697737064555,-84.38545256853104|33.75706211036828,-84.38544988632202|33.75705988037663,-84.38596218824387|33.75706434035984,-84.38602924346924|33.75672984097587,-84.38602387905121|33.75673430097622,-84.3861848115921|33.75704873041761,-84.38618078827858|33.75708329528585,-84.38620090484619|33.75708998525875,-84.3854632973671|33.75699632559081,-84.38538685441017&key=AIzaSyB0HAWWHvCw3mTSRuAjjJCizjTfVt-kYyQ';

export interface State {
  data: {
    name: string;
    email: string
    tags: string[];
  };
  snackbar: {
    message: string;
  };
  debugModeEnabled: boolean;
}

export class FormExample extends Component<{}, State> {
  state: State = {
    data: {
      name: '',
      email: '',
      tags: [],
    },
    snackbar: {
      message: '',
    },
    debugModeEnabled: false,
  };

  render() {
    const {data, debugModeEnabled} = this.state;

    return (
      <Layout
        breadcrumbs={['Page Title']}
        drawerHeaderTitle="App Name"
        drawerContent={drawerContent}
        elementRight={userMenu}
        mainNavTitle="Base Page"
      >
        <Page>
          <PageHeader title="Page Header Title">
            <Button
              className="btn-icon btn-square"
              id="btn-save"
              color="link"
              title="Save"
              onClick={this.handleSaveClickButton}
            >
              <Icon name="save" />
            </Button>

            <UncontrolledTooltip placement="left" target="btn-save">
              Save
            </UncontrolledTooltip>
          </PageHeader>
          <PageBody>
            <section>
              <FormImages
                images={panelImages}
                mapImageUrl={mapImage}
                marketingImageUrl={marketingImage}
                modelName="Panel"
                noUploadButton
                readOnly
              />

              <section className="sub-section">
                <Form autoComplete="off" onSubmit={this.handleSubmit}>
                  <InputText
                    helpText="Type your name"
                    label="Name"
                    name="name"
                    value={data.name}
                    onChange={this.handleChangeForField('name')}
                  />

                  <InputText
                    label="Email"
                    name="email"
                    value={data.email}
                    onChange={this.handleChangeForField('email')}
                  />

                  <InputText
                    label="Tags"
                    name="tags"
                    value={data.tags}
                    valueIsArray
                    onChange={this.handleChangeForField('tags')}
                  />

                  <Row>
                    <Col sm={{offset: 3}}>
                      <FormActions
                        objectToDebug={data}
                        onClickBackButton={this.handleClickBackButton}
                        onChangeDebugObject={this.handleJsonDebuggerChange}
                      />
                    </Col>
                  </Row>
                </Form>
              </section>

              <section className="sub-section">
                <Row>
                  <Col sm={{offset: 3}}>
                    <DangerZone
                      onRemoveConfirmation={this.handleOnRemoveConfirmation}
                      text="Once you delete this data, there is no going back. Please be certain."
                      modalTitle="Delete"
                      modalMessage="Are you sure you want to permanently remove this data?">
                    </DangerZone>
                  </Col>
                </Row>
              </section>
            </section>
          </PageBody>
        </Page>

        <Snackbar open={!!this.state.snackbar.message}
                  onTimeout={this.hideMessage}
        >
          {this.state.snackbar.message}
        </Snackbar>
      </Layout>
    );
  }

  handleChangeForField = (fieldName: string) => (fieldValue: any) => {
    const updatedFormData = Object.assign({},
      this.state.data,
      {[fieldName]: fieldValue},
    );

    this.setState({data: updatedFormData});
  }

  handleJsonDebuggerChange = (object: any) => {
    this.setState({data: object});
  }

  handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    PageLoadingIndicator.start();
    setTimeout(() => PageLoadingIndicator.done(), 2000);

    const snackbar = { message: 'Submit clicked'};
    this.setState({snackbar});
  }

  toggleDebugMode = () => {
    this.setState({debugModeEnabled: !this.state.debugModeEnabled});
  }

  handleClickBackButton = () => {
    const snackbar = { message: 'Back clicked'};
    this.setState({snackbar});
  }

  handleOnRemoveConfirmation = () => {
    const snackbar = { message: 'Remove confirmed'};
    this.setState({snackbar});
  }

  handleSaveClickButton = () => {
    const snackbar = { message: 'Save clicked'};
    this.setState({snackbar});
  }

  hideMessage = () => {
    const snackbar = { message: ''};
    this.setState({snackbar});
  }
}