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

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

import { FormGroup, FormRow, useFormSettings } from '@/modules/@common/Form';
import ItemList from '../../ItemList/ItemList';
import { Autocomplete, Button, Switch, TextField } from '@/mui/components';

function SyndicatedContentTab() {
  const { size } = useFormSettings();
  const [account, setAccount] = useState(null);
  const dispatch = useDispatch();

  const includePublicContent = useSelector(selectors.includePublicContentSelector);
  const accounts = useSelector(selectors.accountsSelector);
  const accountOptions = useSelector(selectors.accountOptionsSelector);

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

  const handleAddAccount = () => {
    handleSetState({ accounts: [].concat(accounts, account) });
    setAccount(null);
  };
  const handleDeleteAccount = (indexForDelete) => {
    handleSetState({ accounts: accounts.filter((_, index) => index !== indexForDelete) });
  };

  return (
    <>
      <FormRow label="Include All Syndication Accounts">
        <Switch
          size={size}
          color="primary"
          checked={includePublicContent}
          onChange={(e) => handleSetState({ includePublicContent: e.target.checked })}
        />
      </FormRow>
      {!includePublicContent && (
        <FormGroup>
          <FormRow>
            <Autocomplete
              size={size}
              loading={!accountOptions}
              options={accountOptions || []}
              value={account}
              disabled={includePublicContent}
              filterOptions={(options) => {
                const filteredOptions = options.filter((o) =>
                  accounts.length ? !accounts.some((oo) => o.value === oo.value) : true,
                );

                return filteredOptions;
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  required
                  value=""
                  variant="outlined"
                  placeholder="Select Syndication Account"
                  label=""
                  onChange={(e) =>
                    dispatch(getAccountOptionsAction({ searchText: e.target.value, isSyndicationOnly: true }))
                  }
                />
              )}
              onOpen={() => dispatch(getAccountOptionsAction({ isSyndicationOnly: true }))}
              onChange={(e, account$) => setAccount(account$)}
            />
            <Button
              variant="outlined"
              size={size}
              color="primary"
              shape="rounded"
              disabled={includePublicContent || !account}
              onClick={handleAddAccount}
            >
              Add
            </Button>
          </FormRow>
          <FormRow>
            <ItemList disabled={includePublicContent} items={accounts} onDelete={handleDeleteAccount} />
          </FormRow>
        </FormGroup>
      )}
    </>
  );
}

export default SyndicatedContentTab;
