import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import dayjs from 'dayjs';
import { MonetizationOnRounded } from '@mui/icons-material';

import * as selectors from '../../../redux/selectors';
import { removeErrorByPropAction, setAction } from '../../../redux/slices';
import { getInputPropsByName } from '@/modules/@common/Form/helpers';

import { FormGroupTitle, FormRow, FormSection, useFormSettings } from '@/modules/@common/Form';
import { DateTimePicker, InputAdornment, MenuItem, NumberField, Select } from '@/mui/components';

const MAX_RATE = 999;
const MAX_IMPRESSIONS = 999999999;
const MAX_SPEND = 999999;

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

  const startTime = useSelector(selectors.startTimeSelector);
  const endTime = useSelector(selectors.endTimeSelector);
  const timezone = useSelector(selectors.timezoneSelector);
  const timezoneOptions = useSelector(selectors.timezoneOptionsSelector);
  const rate = useSelector(selectors.rateSelector);
  const impressionsBudget = useSelector(selectors.impressionsBudgetSelector);
  const spendBudget = useSelector(selectors.spendBudgetSelector);

  const scheme = useSelector(selectors.schemeSelector);

  // handlers
  const handleSetState = (state) => dispatch(setAction(state));

  return (
    <FormSection>
      <FormRow label="Timing">
        <DateTimePicker
          clearable
          value={startTime ? dayjs(startTime) : undefined}
          label="Start"
          data-id="filterDatePickerStartTime"
          maxDate={endTime ? dayjs(endTime) : undefined}
          maxDateMessage="Date should not be after end date"
          slotProps={{
            textField: {
              size,
              placeholder: 'mm/dd/yyyy hh:mm',
              ...getInputPropsByName(scheme, ['startTime']),
              label: 'Start',
              required: false,
            },
          }}
          onChange={(date) => handleSetState({ startTime: date?.toDate().getTime() })}
          onOpen={() => dispatch(removeErrorByPropAction(['startTime']))}
        />

        <DateTimePicker
          clearable
          value={endTime ? dayjs(endTime) : undefined}
          label="End"
          data-id="filterDatePickerStartTime"
          minDate={startTime ? dayjs(startTime) : undefined}
          maxDateMessage="Date should not be after end date"
          slotProps={{
            textField: {
              size,
              placeholder: 'mm/dd/yyyy hh:mm',
            },
          }}
          onChange={(date) => handleSetState({ endTime: date?.toDate().getTime() })}
        />
      </FormRow>

      <FormRow label="Timezone">
        <Select
          key={timezone?.id}
          placeholder="Select Status"
          size={size}
          value={timezone?.id}
          onChange={(e) => {
            handleSetState({ timezone: { id: e.target.value } });
          }}
        >
          {timezoneOptions?.map((option) => (
            <MenuItem key={option.id} value={option.id}>
              {option.displayName}
            </MenuItem>
          ))}
        </Select>
      </FormRow>

      <FormRow label="Rate">
        <NumberField
          size={size}
          min={1}
          step={1}
          max={MAX_RATE}
          placeholder="Rate"
          value={rate}
          onChange={(e) => {
            handleSetState({ rate: e.target.value });
          }}
          {...getInputPropsByName(scheme, ['rate'])}
          onFocus={() => dispatch(removeErrorByPropAction(['rate']))}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <MonetizationOnRounded />
              </InputAdornment>
            ),
          }}
        />
      </FormRow>

      <FormGroupTitle>Total Budget</FormGroupTitle>

      <FormRow label="Impressions">
        <NumberField
          size={size}
          min={1}
          step={1}
          max={MAX_IMPRESSIONS}
          placeholder="Impressions"
          value={impressionsBudget}
          onChange={(e) => {
            handleSetState({ impressionsBudget: e.target.value });
          }}
          {...getInputPropsByName(scheme, ['impressionsBudget'])}
          onFocus={() => dispatch(removeErrorByPropAction(['impressionsBudget']))}
          label=""
        />
      </FormRow>

      <FormRow label="Spend">
        <NumberField
          size={size}
          min={1}
          step={1}
          max={MAX_SPEND}
          placeholder="Spend"
          value={spendBudget}
          onChange={(e) => {
            handleSetState({ spendBudget: e.target.value });
          }}
          {...getInputPropsByName(scheme, ['spendBudget'])}
          onFocus={() => dispatch(removeErrorByPropAction(['spendBudget']))}
          label=""
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <MonetizationOnRounded />
              </InputAdornment>
            ),
          }}
        />
      </FormRow>
    </FormSection>
  );
}

export default GeneralTab;
