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

import {
  TYPE_INTELLIGENT,
  TYPE_INTELLIGENT_AMP,
  TYPE_OUTSTREAM,
  TYPE_STORIES,
  TYPE_STORIES_AMP,
  TYPE_VERTICAL,
} from '@/modules/@common/constants/playerTypes';

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

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

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

  // selectors
  const selfService = useSelector(selectors.selfServiceSelector);
  const templatePlayerLumX = useSelector(selectors.templatePlayerLumXSelector);
  const templatePlayerLumXAmp = useSelector(selectors.templatePlayerLumXAmpSelector);
  const templatePlayerLumN = useSelector(selectors.templatePlayerLumNSelector);
  const templatePlayerLumNAmp = useSelector(selectors.templatePlayerLumNAmpSelector);
  const templatePlayerVertical = useSelector(selectors.templatePlayerVerticalSelector);
  const templatePlayerOutstream = useSelector(selectors.templatePlayerOutstreamSelector);
  const templatePlayerOptions = useSelector(selectors.templatePlayerOptionsSelector);
  const monetization = useSelector(selectors.monetizationSelector);
  const firstLook = useSelector(selectors.firstLookSelector);
  const cpm = useSelector(selectors.cpmSelector);
  const account = useSelector(selectors.accountSelector);

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

  return (
    <>
      <FormRow label="Self Service">
        <Switch
          color="primary"
          size={size}
          checked={selfService}
          onChange={(e) => handleSetState({ selfService: e.target.checked })}
        />
      </FormRow>
      {selfService && (
        <>
          <FormGroupTitle>Player Templates</FormGroupTitle>
          <FormRow fullWidth>
            <Typography variant="body2">
              Choose the players that will be the baseline for the hub’s created players.
              <br />
              Hub’s players will be based on the player’s settings.
            </Typography>
          </FormRow>
          <FormRow label="Intelligent Template">
            <Autocomplete
              size={size}
              loading={!templatePlayerOptions}
              options={templatePlayerOptions || []}
              value={templatePlayerLumX}
              disabled={!selfService || !account}
              renderInput={(params) => (
                <TextField
                  {...params}
                  required
                  value=""
                  variant="outlined"
                  placeholder="Choose a Player"
                  label=""
                  onChange={(e) =>
                    dispatch(
                      getTemplatePlayerOptionsAction({
                        searchText: e.target.value,
                        type: TYPE_INTELLIGENT,
                        accountId: account.value,
                      }),
                    )
                  }
                />
              )}
              onOpen={() =>
                dispatch(getTemplatePlayerOptionsAction({ type: TYPE_INTELLIGENT, accountId: account.value }))
              }
              onChange={(e, templatePlayerLumX$) => handleSetState({ templatePlayerLumX: templatePlayerLumX$ })}
            />
          </FormRow>
          <FormRow label="Intelligent-AMP Template">
            <Autocomplete
              size={size}
              loading={!templatePlayerOptions}
              options={templatePlayerOptions || []}
              value={templatePlayerLumXAmp}
              disabled={!selfService || !account}
              renderInput={(params) => (
                <TextField
                  {...params}
                  required
                  value=""
                  variant="outlined"
                  placeholder="Choose a Player"
                  label=""
                  onChange={(e) =>
                    dispatch(
                      getTemplatePlayerOptionsAction({
                        searchText: e.target.value,
                        type: TYPE_INTELLIGENT_AMP,
                        accountId: account.value,
                      }),
                    )
                  }
                />
              )}
              onOpen={() =>
                dispatch(getTemplatePlayerOptionsAction({ type: TYPE_INTELLIGENT_AMP, accountId: account.value }))
              }
              onChange={(e, templatePlayerLumXAmp$) =>
                handleSetState({
                  templatePlayerLumXAmp: templatePlayerLumXAmp$,
                })
              }
            />
          </FormRow>
          <FormRow label="Stories Template">
            <Autocomplete
              size={size}
              loading={!templatePlayerOptions}
              options={templatePlayerOptions || []}
              value={templatePlayerLumN}
              disabled={!selfService || !account}
              renderInput={(params) => (
                <TextField
                  {...params}
                  required
                  value=""
                  variant="outlined"
                  placeholder="Choose a Player"
                  label=""
                  onChange={(e) =>
                    dispatch(
                      getTemplatePlayerOptionsAction({
                        searchText: e.target.value,
                        type: TYPE_STORIES,
                        accountId: account.value,
                      }),
                    )
                  }
                />
              )}
              onOpen={() => dispatch(getTemplatePlayerOptionsAction({ type: TYPE_STORIES, accountId: account.value }))}
              onChange={(e, templatePlayerLumN$) =>
                handleSetState({
                  templatePlayerLumN: templatePlayerLumN$,
                })
              }
            />
          </FormRow>
          <FormRow label="Stories-AMP Template">
            <Autocomplete
              size={size}
              loading={!templatePlayerOptions}
              options={templatePlayerOptions || []}
              value={templatePlayerLumNAmp}
              disabled={!selfService || !account}
              renderInput={(params) => (
                <TextField
                  {...params}
                  required
                  value=""
                  variant="outlined"
                  placeholder="Choose a Player"
                  label=""
                  onChange={(e) =>
                    dispatch(
                      getTemplatePlayerOptionsAction({
                        searchText: e.target.value,
                        type: TYPE_STORIES_AMP,
                        accountId: account.value,
                      }),
                    )
                  }
                />
              )}
              onOpen={() =>
                dispatch(getTemplatePlayerOptionsAction({ type: TYPE_STORIES_AMP, accountId: account.value }))
              }
              onChange={(e, templatePlayerLumNAmp$) =>
                handleSetState({
                  templatePlayerLumNAmp: templatePlayerLumNAmp$,
                })
              }
            />
          </FormRow>
          <FormRow label="Vertical Template">
            <Autocomplete
              size={size}
              loading={!templatePlayerOptions}
              options={templatePlayerOptions || []}
              value={templatePlayerVertical}
              disabled={!selfService || !account}
              renderInput={(params) => (
                <TextField
                  {...params}
                  required
                  value=""
                  variant="outlined"
                  placeholder="Choose a Player"
                  label=""
                  onChange={(e) =>
                    dispatch(
                      getTemplatePlayerOptionsAction({
                        searchText: e.target.value,
                        type: TYPE_VERTICAL,
                        accountId: account.value,
                      }),
                    )
                  }
                />
              )}
              onOpen={() => dispatch(getTemplatePlayerOptionsAction({ type: TYPE_VERTICAL, accountId: account.value }))}
              onChange={(e, templatePlayerVertical$) =>
                handleSetState({
                  templatePlayerVertical: templatePlayerVertical$,
                })
              }
            />
          </FormRow>
          <FormRow label="Outstream Template">
            <Autocomplete
              size={size}
              loading={!templatePlayerOptions}
              options={templatePlayerOptions || []}
              value={templatePlayerOutstream}
              disabled={!selfService || !account}
              renderInput={(params) => (
                <TextField
                  {...params}
                  required
                  value=""
                  variant="outlined"
                  placeholder="Choose a Player"
                  label=""
                  onChange={(e) =>
                    dispatch(
                      getTemplatePlayerOptionsAction({
                        searchText: e.target.value,
                        type: TYPE_OUTSTREAM,
                        accountId: account.value,
                      }),
                    )
                  }
                />
              )}
              onOpen={() =>
                dispatch(getTemplatePlayerOptionsAction({ type: TYPE_OUTSTREAM, accountId: account.value }))
              }
              onChange={(e, templatePlayerOutstream$) =>
                handleSetState({
                  templatePlayerOutstream: templatePlayerOutstream$,
                })
              }
            />
          </FormRow>
          <FormRow label="Monetization">
            <Switch
              color="primary"
              size={size}
              checked={monetization}
              disabled={!selfService}
              onChange={(e) => handleSetState({ monetization: e.target.checked })}
            />
          </FormRow>
          <FormRow label="First Look">
            <Switch
              color="primary"
              size={size}
              checked={firstLook}
              disabled={!selfService || !monetization}
              onChange={(e) => handleSetState({ firstLook: e.target.checked })}
            />
          </FormRow>
          <FormRow label="Default CPM ($)">
            <TextField
              size={size}
              placeholder="0"
              label=""
              variant="outlined"
              value={cpm}
              disabled={!selfService || !monetization}
              inputProps={{
                maxLength: 255,
                type: 'number',
              }}
              onChange={(e) => {
                handleSetState({ cpm: e.target.value });
              }}
            />
          </FormRow>
        </>
      )}
    </>
  );
}

export default PlayerSelfServiceTab;
