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

import {
  DEMAND_TAG_HB_GAM_PLATFORMS,
  DEMAND_TAG_PAGE_BUSINESS_MODEL,
  DEMAND_TAG_PAGE_BUSINESS_MODEL_HB_NOT_GAM,
  DEMAND_TAG_PAGE_PRICING_TYPE,
  DEMAND_TAG_PAGE_SOURCE,
  DEMAND_TAG_PAGE_TYPE_VALUES,
  DEMAND_TAG_PRICING_TYPE,
} from '@/modules/marketplace/account/constants';

import * as selectors from '../../../../../../redux/selectors';
import * as actions from '../../../../../../redux/slices';
import { getRequiredInputProps } from '@/modules/@common/Form/helpers';

import { FormRow } from '@/modules/@common/Form';
import { Autocomplete, MenuItem, Select, TextField } from '@/mui/components';

function BusinessModel(props) {
  const dispatch = useDispatch();

  const pricing = useSelector(selectors.pricingSelector);
  const settings = useSelector(selectors.settingsSelector);

  const { model, source, seatId, type, adUnitId, errors } = pricing;

  const { type: tagType, platform } = settings;

  const showAdditionalFields = model === DEMAND_TAG_PAGE_BUSINESS_MODEL[1].value;

  const modelOptions =
    tagType === DEMAND_TAG_PAGE_TYPE_VALUES.hb && !DEMAND_TAG_HB_GAM_PLATFORMS.includes(platform.code)
      ? DEMAND_TAG_PAGE_BUSINESS_MODEL_HB_NOT_GAM
      : DEMAND_TAG_PAGE_BUSINESS_MODEL;

  return (
    <>
      <FormRow label="RPM Type">
        <Select
          value={model}
          size="small"
          // eslint-disable-next-line react/prop-types
          disabled={props.disabled}
          onChange={({ target }) => {
            dispatch(
              actions.setPricingTabAction({
                model: target.value,
                source: null,
                seatId: '',
                adUnitId: '',
                errors: {},
              }),
            );

            if (target.value === DEMAND_TAG_PAGE_BUSINESS_MODEL_HB_NOT_GAM[0].value) {
              dispatch(
                actions.setPricingTabAction({
                  fixedRpmRateTable: {
                    rows: [],
                    page: 0,
                    totalCount: 0,
                    rowsPerPage: 5,
                    type: DEMAND_TAG_PRICING_TYPE.price,
                  },
                }),
              );
            }
          }}
        >
          {modelOptions.map((item) => (
            <MenuItem value={item.value} key={item.value}>
              {item.label}
            </MenuItem>
          ))}
        </Select>
      </FormRow>
      {showAdditionalFields && (
        <FormRow label fullWidth>
          <Autocomplete
            value={source ? DEMAND_TAG_PAGE_SOURCE.find((item) => item.value === source) : null}
            options={DEMAND_TAG_PAGE_SOURCE}
            onChange={(e, option) => {
              dispatch(
                actions.setPricingTabAction({
                  source: option.value,
                  seatId: '',
                  adUnitId: '',
                  errors: {},
                }),
              );
            }}
            size="small"
            disableClearable
            renderInput={(params) => (
              <TextField
                {...params}
                placeholder="Source"
                size="small"
                {...getRequiredInputProps({
                  fieldName: 'pricing-source-textfield',
                  error: !!errors?.source?.length,
                })}
              />
            )}
          />
          <TextField
            value={seatId}
            size="small"
            placeholder="Seat ID"
            onChange={({ target }) => {
              const { seatId: seatIdValue, ...restErrors } = errors;
              dispatch(actions.setPricingTabAction({ seatId: target.value, errors: restErrors }));
            }}
            {...getRequiredInputProps({
              label: source !== DEMAND_TAG_PAGE_SOURCE[1].value ? 'Required' : '',
              fieldName: 'seatId',
              error: !!errors?.seatId?.length,
              helperText: errors?.seatId && errors?.seatId !== 'Required' ? errors?.seatId : '',
            })}
            disabled={source === DEMAND_TAG_PAGE_SOURCE[1].value}
          />
          <Autocomplete
            id="pricing-type"
            value={type ? DEMAND_TAG_PAGE_PRICING_TYPE.find((item) => item.value === type) : null}
            options={DEMAND_TAG_PAGE_PRICING_TYPE}
            onChange={(e, option) => {
              dispatch(
                actions.setPricingTabAction({
                  type: option.value,
                  errors: {},
                }),
              );
            }}
            size="small"
            disableClearable
            renderInput={(params) => (
              <TextField
                {...params}
                placeholder="Type"
                size="small"
                {...getRequiredInputProps({
                  fieldName: 'pricing-type-textfield',
                  error: !!errors?.type?.length,
                })}
              />
            )}
          />
          <TextField
            value={adUnitId}
            size="small"
            placeholder="Ad unit ID/Report Name"
            onChange={({ target }) => {
              const { adUnitId: adUnitIdValue, ...restErrors } = errors;
              dispatch(actions.setPricingTabAction({ adUnitId: target.value, errors: restErrors }));
            }}
            {...getRequiredInputProps({
              fieldName: 'adUnitId',
              error: !!errors?.adUnitId?.length,
              helperText: errors?.adUnitId && errors?.adUnitId !== 'Required' ? errors?.adUnitId : '',
            })}
          />
        </FormRow>
      )}
    </>
  );
}

export default BusinessModel;
