import React, { useState, useEffect } from 'react'
import { DialogTitle, DialogContent, DialogContentText, TextField, CircularProgress } from '@material-ui/core'
import { userStore, dialog } from 'stores'
import fetch from 'fetch/fetchFactory'
import { Company } from 'stores/Classes';
import { createNofication } from 'dialogs/utils';

import { DialogActionsDefault } from 'components';


export const settings = {
  helperText: ['Введите название'],
  textFieldesLabels: ['Название', 'Имя поля бонусов'],
  getTitle: update => update
    ? "Редактировать компанию "
    : "Новая компания",
  getText: update => update
    ? "Для изменения компании введите название и нажмите сохранить"
    : "Для создания компании заполните поля и нажмите создать"
}


const CompanyCreateUpdateDialog: React.FC<{ index?: number, update?: boolean }> = ({ index, update }) => {

  const [state, setState] = useState({
    companyName: '',
    commissionFieldName: '',
    // error
    companyNameError: false,
    // default
    updated: false,
    submitLoading: false
  })


  //################ UPDATE BLOCK #######################################################
  let company: Company
  if (update) company = userStore.companies[index!]
  useEffect(() => {
    if (update) {
      fetch({
        getUrl: () => `/company/${company.id}`,
        storeMutation: (res: any) => {
          setState({
            ...state,
            companyName: res.name,
            commissionFieldName: res.commission.name || '',
            updated: true
          })
        }
      })
    }
  }, [])
  //#####################################################################################

  const allowSubmit = () => {
    if (!state.companyName.length) {
      setState({ ...state, companyNameError: true })
      return false
    }
    return true
  }

  const handleSave = () => {
    if (allowSubmit()) {
      setState({ ...state, submitLoading: true })
      fetch({
        getUrl: () => update ? `/company/${company.id}` : '/company',
        getParams: () => ({
          name: state.companyName,
          commissionFieldName: state.commissionFieldName
        }),
        storeMutation: async () => {
          await userStore.getUserCompanies()
          userStore.setState({ loadedRowsMap: [] })
          dialog.close()
          createNofication(
            update
              ? `Компания ${company.name} успешно изменена`
              : `Компания ${state.companyName} успешно создана`,
            'success')
        },
        method: update ? 'put' : 'post',
        onError: err => {
          console.error(err)
          dialog.close()
          createNofication(`У вас нет прав на изменение компании ${update ? company.name : state.companyName}.`, 'error')
        }
      })
    }
  }

  const { getText, getTitle, textFieldesLabels, helperText } = settings

  return (
    <>
      {(update && !state.updated) && <div className="dialog_loading"><CircularProgress /></div>}

      <DialogTitle id="form-dialog-title">
        {getTitle(update)}
        {update && <span className="dialog_header_name">{state.companyName}</span>}
      </DialogTitle>
      <DialogContent>
        <DialogContentText>
          {getText(update)}
        </DialogContentText>
        <TextField
          onChange={(e) => { setState({ ...state, companyName: e.target.value, companyNameError: false }) }}
          error={state.companyNameError}
          helperText={state.companyNameError && helperText}
          autoFocus
          margin="dense"
          label={textFieldesLabels[0]}
          value={state.companyName}
          fullWidth
        />
        <TextField
          onChange={(e) => { setState({ ...state, commissionFieldName: e.target.value }) }}
          margin="dense"
          label={textFieldesLabels[1]}
          value={state.commissionFieldName}
          fullWidth
        />
      </DialogContent>
      <DialogActionsDefault
        onClick={handleSave}
        loading={state.submitLoading}
        buttonText={update ? "Сохранить" : "Создать"}
      />
    </>
  )
}


export default CompanyCreateUpdateDialog