import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import dayjs from 'dayjs';

import * as selectors from '../../../redux/selectors';
import { setAction } from '../../../redux/slices';

import { FormRow, FormRowItem, useFormSettings } from '@/modules/@common/Form';
import { Switch, TextField } from '@/mui/components';

const MESSAGE_MAX_LENGTH = 200;

function GeneralTab() {
  const dispatch = useDispatch();
  const { size } = useFormSettings();

  const isLoading = useSelector(selectors.isLoadingSelector);
  const overallFailure = useSelector(selectors.overallFailureSelector);
  const popup = useSelector(selectors.popupSelector);
  const message = useSelector(selectors.messageSelector);
  const updatedAt = useSelector(selectors.updatedAtSelector);
  const updatedBy = useSelector(selectors.updatedBySelector);

  return (
    <>
      <FormRow label="Overall analytics failure" tooltip="Error message will be displayed instead of analytics data">
        <Switch
          color="primary"
          disabled={isLoading}
          size={size}
          checked={overallFailure}
          onChange={() => dispatch(setAction({ overallFailure: !overallFailure }))}
          name="terms"
        />
      </FormRow>
      <FormRow
        label="Popup message"
        tooltip={'Message will be displayed over the web app area \n (for example: No data available from October 10)'}
      >
        <Switch
          color="primary"
          disabled={isLoading}
          checked={popup}
          size={size}
          onChange={() => dispatch(setAction({ popup: !popup }))}
          name="terms"
        />
      </FormRow>
      <FormRow label="Message">
        <TextField
          minRows={3}
          maxRows={3}
          variant="outlined"
          size={size}
          textAlign="left"
          shape="rounded"
          multiline
          value={message}
          placeholder="Enter Message"
          disabled={isLoading}
          inputProps={{ maxLength: MESSAGE_MAX_LENGTH }}
          onChange={({ target }) => dispatch(setAction({ message: target.value }))}
        />
      </FormRow>
      <FormRow label="Last update">
        <FormRowItem>{dayjs(updatedAt).format('MMMM Do YYYY, h:mm:ss a')}</FormRowItem>
      </FormRow>
      <FormRow label="Updated by">
        <FormRowItem>{updatedBy}</FormRowItem>
      </FormRow>
    </>
  );
}

export default GeneralTab;
