import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useRouter } from 'next/router';

import { TYPE_ALL, TYPES_OPTIONS } from '../../../../List/constants';

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

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

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

  const name = useSelector(selectors.nameSelector);
  const url = useSelector(selectors.urlSelector);
  const status = useSelector(selectors.statusSelector);
  const placementId = useSelector(selectors.placementIdSelector);
  const isDefaultForPlayerType = useSelector(selectors.isDefaultForPlayerTypeSelector);
  const playerTypesValue = useSelector(selectors.playerTypesValueSelector);
  const playerTypesOptions = useSelector(selectors.playerTypesOptionsSelector);
  const macro = useSelector(selectors.macroSelector);
  const comments = useSelector(selectors.commentsSelector);
  const scheme = useSelector(selectors.schemeSelector);

  const id = parseInt(router.query.id, 10);

  const typesOptions = TYPES_OPTIONS.filter((option) => option.value !== TYPE_ALL);

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

  const NAME_MAX_LENGTH = 100;
  const COMMENT_MAX_LENGTH = 255;

  return (
    <>
      <FormRow label="Partner Name">
        <TextField
          size={size}
          placeholder="Enter Partner Name"
          value={name}
          onChange={(e) => handleSetState({ name: e.target.value })}
          {...getInputPropsByName(scheme, ['name'])}
          onFocus={() => dispatch(removeErrorByPropAction(['name']))}
          inputProps={{ maxLength: NAME_MAX_LENGTH }}
        />
      </FormRow>
      <FormRow label="Status">
        <Switch
          color="primary"
          size={size}
          checked={!!status}
          onChange={(e) => handleSetState({ status: e.target.checked ? 1 : 0 })}
        />
      </FormRow>
      <FormRow label="Tag URL">
        <TextField
          size={size}
          placeholder="Enter generic URL prefix"
          value={url}
          onChange={(e) => handleSetState({ url: e.target.value })}
          {...getInputPropsByName(scheme, ['url'])}
          onFocus={() => dispatch(removeErrorByPropAction(['url']))}
        />
      </FormRow>
      <FormRow label="Type">
        <Select
          size={size}
          value={placementId}
          disabled={id}
          onChange={(e) => handleSetState({ placementId: e.target.value })}
        >
          {typesOptions.map((item) => (
            <MenuItem key={item.label} value={item.value}>
              {item.label}
            </MenuItem>
          ))}
        </Select>
      </FormRow>
      <FormRow label="Default For Player Types">
        <Switch
          color="primary"
          size={size}
          checked={!!isDefaultForPlayerType}
          onChange={() => handleSetState({ isDefaultForPlayerType: !isDefaultForPlayerType })}
        />
      </FormRow>
      <FormRow label="Player Types">
        <Autocomplete
          size={size}
          options={playerTypesOptions || []}
          value={playerTypesValue}
          multiple
          filterSelectedOptions
          optionLabelKey="name"
          optionValueKey="id"
          disabled={!isDefaultForPlayerType}
          renderInput={(params) => <TextField {...params} placeholder="Select Player Type" />}
          onChange={(e, playerTypesIds$) =>
            handleSetState({
              playerTypesIds: playerTypesIds$.map((player) => player.id),
            })
          }
        />
      </FormRow>
      <FormRow
        label="Macros"
        multiline
        tooltip={
          <Typography variant="caption" color="text.secondary" fontWeight={400}>
            Enter ad server macro including <b>question mark</b> and placeholder for
            {/* eslint-disable-next-line no-template-curly-in-string */}
            {" id ${ID} followed by AnyClip's macro (e.g: w=$[width]&h=$[height])"}
          </Typography>
        }
      >
        <TextField
          size={size}
          rows={4}
          multiline
          placeholder="Enter Macros"
          value={macro}
          onChange={(e) => handleSetState({ macro: e.target.value })}
          {...getInputPropsByName(scheme, ['macro'])}
          onFocus={() => dispatch(removeErrorByPropAction(['macro']))}
          helperText={
            <>
              <a
                href="https://anyclip.atlassian.net/wiki/spaces/RD/pages/768933889/LRE+supported+macros"
                target="_blank"
                rel="noreferrer"
              >
                Click here
              </a>{' '}
              to see list of available macros
            </>
          }
        />
      </FormRow>
      <FormRow label="Comments">
        <TextField
          size={size}
          rows={4}
          multiline
          placeholder="Enter Comments"
          value={comments}
          onChange={(e) => handleSetState({ comments: e.target.value })}
          inputProps={{ maxLength: COMMENT_MAX_LENGTH }}
        />
      </FormRow>
    </>
  );
}

export default GeneralTab;
