import React from 'react';
import {
  Stack,
  Text,
  PrimaryButton,
  FontWeights
} from 'office-ui-fabric-react';
import { AppState } from './RootReducer';
import { Dispatch } from 'redux';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';
import { CHECK_FOR_SIGNEDIN_USER_COMMAND } from './auth/actions';
import {
  SET_MEETING_COMMAND,
  SetMeetingCommand
} from './meeting-creator/actions';
import { Header } from './components/header';
import { createDefaultMeetingInput } from './meeting-creator/models';
import { FormattedMessage } from 'react-intl';
import { translate } from './localization/translate';

import calendar from './images/calendar.svg';

const boldStyle = { root: { fontWeight: FontWeights.semibold } };

interface CreateLandingPageProps {
  checkForSignedInUser: () => void;
  onNewMeeting: () => void;
}

const mapStateToProps = (state: AppState) => ({});

const mapDispatchToProps = (dispatch: Dispatch) => ({
  checkForSignedInUser: () =>
    dispatch({
      type: CHECK_FOR_SIGNEDIN_USER_COMMAND
    }),
  onNewMeeting: () => {
    dispatch({
      type: SET_MEETING_COMMAND,
      meeting: createDefaultMeetingInput()
    } as SetMeetingCommand);
    dispatch(push('/createMeeting'));
  }
});

function CreateLandingPageComponent(props: CreateLandingPageProps) {
  // Check for a signed-in user and go to the signin page if there isn't one
  const checkForSignedInUser = props.checkForSignedInUser;
  React.useEffect(() => {
    checkForSignedInUser();
  });

  return (
    <>
      <Header />
      <Stack
        className="container"
        horizontalAlign="center"
        verticalAlign="center"
        verticalFill
        tokens={{
          childrenGap: 35
        }}
      >
        <img
          className="splashImage"
          src={calendar}
          alt={translate('createLandingPage.splash.altText')}
        />
        <Text variant="xLargePlus" styles={boldStyle}>
          <FormattedMessage id="createLandingPage.schedule.header" />
        </Text>
        <Text variant="medium">
          <FormattedMessage id="createLandingPage.subheader" />
        </Text>
        <PrimaryButton
          className="teamsButton"
          onClick={() => props.onNewMeeting()}
          ariaLabel={translate('createLandingPage.create.meeting.ariaLabel')}
        >
          <FormattedMessage id="createLandingPage.create.meeting" />
        </PrimaryButton>
      </Stack>
    </>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CreateLandingPageComponent);