import React, { Component, ChangeEvent, KeyboardEvent, CSSProperties } from 'react';
import { WithStyles, Snackbar } from '@material-ui/core';
import classNames from 'classnames';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
// import TextField from '@material-ui/core/TextField';
import Scrollbars from 'react-custom-scrollbars';
import { Theme, withStyles } from '@material-ui/core/styles';
// import { BigAvatar } from 'src/Component/Avatar';
import { Query, MutationFn, Mutation } from 'react-apollo';
import { GET_ME } from 'src/Graphql/User/query';
import UserInterface from 'src/Interface/UserInterface';
import { DataProxy } from 'apollo-cache';
import { ReturnLink } from '../All/ReturnLink';
import { ACTIVE_MAILER } from 'src/Graphql/mutation';

const styles = (theme: Theme): Record<string, CSSProperties | Record<string, CSSProperties>> => ({
  col: {
    boxSizing: 'border-box' as 'border-box',
    display: 'flex',
    flex: '0 1 auto',
    flexDirection: 'column' as 'column',
    msFlex: '0 1 auto',
    WebkitFlex: '0 1 auto',
  },
  row: {
    boxSizing: 'border-box' as 'border-box',
    display: 'flex',
    flex: '0 1 auto',
    flexDirection: 'row' as 'row',
    msFlex: '0 1 auto',
    WebkitFlex: '0 1 auto',
  },
  justifyEnd: {
    justifyContent: 'flex-end',
    padding: '0 44px 44px',
  },
  submitButtonWrapper: {
    marginTop: 0,
  },
  justifyCenter: {
    justifyContent: 'center',
  },
  contentEditEmail: {
    marginTop: 28,
  },
  paper: {
    '@media (max-width: 600px)': {
      width: '100%',
    },
    width: 454,
    margin: '0 auto',
    boxShadow:
      ' 0px 0px 1px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,.1), 0px 0px 0px 0px rgba(0,0,0,0.12)',
    borderRadius: 0,
    paddingBottom: 20,
    paddingTop: 20,
  },
  inputAvatar: {
    display: 'none',
  },
  wrapper: {
    position: 'relative' as 'relative',
    marginTop: 20,
  },
  buttonProgress: {
    color: theme.customPalette.primary.main,
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    marginTop: -8,
    marginLeft: -12,
  },
  contentForm: {
    margin: '14px 0 24px',
    padding: '0 44px',
    '@media (max-width: 600px)': {
      padding: '0 24px',
    },
  },
  textField: {
    width: '100%',
    margin: '20px 0 8px',
    fontWeight: 500,
    fontSize: 60,
  },
  actionButton: {
    color: 'white',
  },
  button: {
    margin: '0px 4px',
    padding: '14px 53px',
    textTransform: 'capitalize' as 'capitalize',
    fontWeight: 400,
    fontSize: 11,
  },
  input: {
    fontSize: 60,
  },
  title: {
    fontSize: 24,
    marginTop: 28,
    fontWeight: 400,
  },
});

interface EditEmailProps {
  classes: any;
}
interface EditEmailStates {
  bgColor?: string;
  activate?: boolean;
  textS?: string;
  position?: string;
  isLoading: boolean;
  snackBarMessage?: string;
  username?: string;
  avatar?: string;
  avatarFile?: File;
  avatarName?: string;
}

class EditEmail extends Component<EditEmailProps & WithStyles<any>, EditEmailStates> {
  inputFile: any;
  oldUser?: UserInterface;

  constructor(props: any) {
    super(props);
    this.state = {
      isLoading: false,
      bgColor: 'green',
      activate: true,
      textS: "Pause Email Notification",
    };
  }

  handleKeyPress = (
    mutationDeleteAccount: MutationFn<any, any>,
    evt: any,
  ) => {
    this.handleSubmit(mutationDeleteAccount);
  };

  handleCloseSnackbar = () => {
    this.setState({ snackBarMessage: undefined });
  };

  preventDefaultKeyPress = (evt: KeyboardEvent<any>) => {
    evt.preventDefault();
  };

  handleChangeInput = (evt: ChangeEvent<HTMLInputElement>) => {
    this.setState({ ...this.state, [evt.target.id]: evt.target.value });
  };

  showSnackMessage = (snackBarMessage: string) => {
    this.setState({ snackBarMessage });
  };


  handleSubmit = async (
    mutationEditeMailer: MutationFn<any, any>,
  ) => {
    if (!this.oldUser) {
      return;
    }

    this.setState({ isLoading: true });

    mutationEditeMailer({
      variables: {
        id: this.oldUser.id,
        mailer: this.oldUser.mailer
      },
    })
      .then(() => {
        this.showSnackMessage('Successfully modified');
      })
      .catch(err => {
        this.showSnackMessage('An error occurred');
      })
      .finally(() => {
        this.setState({ isLoading: false });
      });
  };

  updateCache = (cache: DataProxy, EditEmailResult: any) => {
    const data = cache.readQuery<{ me: UserInterface }>({ query: GET_ME });
    if (data) {
      const newUser: UserInterface = EditEmailResult.data.EditEmail;
      data.me = { ...data.me, ...newUser };
      cache.writeQuery({
        query: GET_ME,
        data,
      });
    }
  };


  render() {
    const { classes } = this.props;
    const { isLoading, snackBarMessage } = this.state;
    return (
      <Query query={GET_ME}>
        {({ data, loading, error }) => {
          if (loading) {
            return 'Loading...';
          }
          if (error) {
            return 'Error';
          }
          this.oldUser = data.me;
          if (this.oldUser !== undefined) {
            return (
              <Mutation mutation={ACTIVE_MAILER} update={this.updateCache}>
                {mutationActiveEmail => (
                  <Scrollbars
                    style={{ height: '100vh' }}
                    autoHide={true}
                    autoHideTimeout={500}
                    autoHideDuration={50}
                  >
                    <Snackbar
                      open={!!snackBarMessage}
                      message={snackBarMessage}
                      onClose={this.handleCloseSnackbar}
                      autoHideDuration={5000}
                    />
                    <div className={classes.contentEditEmail}>
                      <ReturnLink />
                      <Paper className={classes.paper} elevation={1}>

                        <form
                          className={classes.contentForm}
                        >
                          <div className={classNames(
                            classes.row,
                            classes.submitButtonWrapper,
                            classes.justifyCenter,
                          )}>
                            <Button
                              className={classNames(classes.actionButton)}
                              variant="flat"
                              size="small"
                              onClick={this.handleKeyPress.bind(
                                this,
                                mutationActiveEmail,
                              )}
                              style={{ backgroundColor: this.oldUser ? this.oldUser.mailer ? 'red' : 'green' : 'green' }}
                              id="btn-save"

                              disabled={isLoading}
                            >
                              {this.state.textS}
                            </Button>
                          </div>

                        </form>



                      </Paper>
                    </div>
                  </Scrollbars>
                )}
              </Mutation>
            );
          }
          else { return null; }
        }}
      </Query>
    );
  }
}

export default withStyles(styles as any)(EditEmail);