/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent, useState } from 'react';
import { DialogActions, DialogContent } from '@material-ui/core';
import cn from 'classnames';

import { Button } from '../Button';
import { Input } from '../Input';
import { Modal } from '../Modal';
import { Paragraph } from '../Paragraph';
import { DialogProps } from './types.d';
import { useDetectDevice } from '../hooks';

export const Dialog: FunctionComponent<DialogProps> = ({
  buttons,
  check,
  children,
  contentClassName,
  contentStyle,
  modalProps,
  text,
  textClassName = '',
  textStyle,
  title,
}): React.ReactElement => {
  const [error, setError] = useState(false);
  const isCheckFailed = !!check && check.passValue !== check.value;
  const { isMobile } = useDetectDevice();

  const onSubmit = () => {
    if (isCheckFailed) return setError(true);
    buttons.ok.onClick();
    return setError(false);
  };

  const renderCheckInput = () => {
    if (!check) return null;
    const { value, setValue, hint, label } = check;
    return (
      <div className="square-dialog-input-container">
        <Input
          className="square-dialog-input"
          onSubmit={onSubmit}
          hideLabel
          label={label}
          value={value}
          autoFocus
          onChange={(e) => setValue(e.target.value)}
          name="check"
          isError={error}
          helperText={hint ?? ''}
        />
      </div>
    );
  };

  const buttonClassNames = cn({
    'square-dialog-button': true,
    mobile: isMobile,
  });

  const renderButtons = () => {
    const { customButton, ok, cancel } = buttons;
    return (
      <DialogActions className="square-dialog-actions-container">
        {customButton ? (
          <Button
            className={buttonClassNames}
            onClick={customButton.onClick}
            color={customButton.color}
            text={customButton.text}
          />
        ) : null}
        <Button className={buttonClassNames} onClick={onSubmit} color={ok.color ?? 'error'} autoFocus text={ok.text ?? 'ok'} />
        {cancel && (
          <Button
            className={buttonClassNames}
            onClick={cancel.onClick}
            color={cancel.color ?? 'gray'}
            text={cancel.text ?? 'cancel'}
          />
        )}
      </DialogActions>
    );
  };

  return (
    <Modal
      {...modalProps}
      horizontalAlignment="center"
      title={{
        text: title ?? '',
        align: 'center',
        textSize: isMobile ? 12 : 'small',
      }}
      className="square-dialog"
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogContent className={contentClassName} style={contentStyle}>
        {text && (
          <Paragraph
            className={`square-dialog-text ${textClassName}`}
            id="alert-dialog-description"
            multiline
            size={isMobile ? 10 : 'small'}
            style={textStyle}
          >
            {text}
          </Paragraph>
        )}
        {children}
        {renderCheckInput()}
      </DialogContent>
      {renderButtons()}
    </Modal>
  );
};
