import { useWatch } from 'react-hook-form';
import { Trans } from 'react-i18next';

import Alert from '@material-hu/mui/Alert';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import usePublicUser from 'src/hooks/queryHooks/usePublicUser';
import {
  AjustBalanceTypes,
  type Colaborator,
} from 'src/types/acknowledgements';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { numberStringToInt } from 'src/utils/stringUtils';

import FormSelect from 'src/components/FormInputs/FormSelect';
import FormTextField from 'src/components/FormInputs/FormTextField';
import ProfilePicture from 'src/components/ProfilePicture';

import { ADJUST_BALANCE_BODY_MAX_LENGTH } from './constants';
import { ajustBalanceFields } from './forms';
import InputCard from './InputCard';
import { ajustBalance, colaboratorToUser } from './utils';

export type AjustBalanceFormProps = {
  colaborator: Colaborator;
  disabled?: boolean;
};

const AjustBalanceForm = (props: AjustBalanceFormProps) => {
  const { colaborator, disabled = false } = props;

  const { t } = useLokaliseTranslation('acknowledgements');
  const [type, points] = useWatch({
    name: [ajustBalanceFields.type(), ajustBalanceFields.points()],
  });

  const { data: user } = usePublicUser(colaborator.id);

  const typeOptions = Object.values(AjustBalanceTypes).map(option => ({
    value: option,
    label: t('stats.adjust_balance_type', { context: option }),
  }));

  const showAlert = type && points > 0;

  return (
    <Stack
      sx={{
        gap: 2,
        width: '100%',
      }}
    >
      <InputCard.Container>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <ProfilePicture
              id={colaborator.id}
              user={user || colaboratorToUser(colaborator)}
              size="small"
            />
            <Typography variant="globalS">{colaborator.fullName}</Typography>
          </Stack>
          <Typography variant="globalS">
            <Trans
              i18nKey={t('stats.current_balance', {
                count: colaborator.availablePoints,
              })}
              components={{
                strong: (
                  <Typography
                    variant="globalS"
                    fontWeight="fontWeightSemiBold"
                  />
                ),
              }}
            />
          </Typography>
        </Stack>
      </InputCard.Container>
      <InputCard.Container>
        <InputCard.Title id="ajust-balance-ajust-label">
          {t('stats.adjust_balance_adjust_label')}
        </InputCard.Title>
        <Stack
          sx={{
            gap: 1,
            flexDirection: 'row',
          }}
        >
          <FormSelect
            aria-label={t('stats.adjust_balance_type_label')}
            options={typeOptions}
            name={ajustBalanceFields.type()}
          />
          <FormTextField
            aria-label={t('general:points')}
            placeholder={t('general:points')}
            disabled={disabled}
            sx={{
              width: '96px',
            }}
            name={ajustBalanceFields.points()}
            required
            positive
            allowJustNumbers
          />
        </Stack>
        {showAlert && (
          <Alert severity="info">
            <Typography
              variant="globalXS"
              component="ul"
              sx={{
                ml: 2,
              }}
            >
              <li>
                {t('stats.adjust_balance_tip_points', {
                  context: type,
                  count: numberStringToInt(points),
                })}
              </li>
              <li>
                {t('stats.adjust_balance_tip_balance', {
                  count: ajustBalance(
                    colaborator.availablePoints,
                    type,
                    numberStringToInt(points),
                  ),
                })}
              </li>
            </Typography>
          </Alert>
        )}
      </InputCard.Container>
      <InputCard.Container>
        <InputCard.Title
          id="ajust-balance-body-label"
          fontWeight="fontWeightSemiBold"
        >
          {t('stats.adjust_balance_body_label')}
        </InputCard.Title>
        <FormTextField
          id="ajust-balance-body-input"
          aria-labelledby="ajust-balance-body-label"
          name={ajustBalanceFields.body()}
          variant="outlined"
          placeholder={t('stats.adjust_balance_body_placeholder')}
          fullWidth
          multiline
          showCounter
          minRows={4}
          maxRows={4}
          maxLength={ADJUST_BALANCE_BODY_MAX_LENGTH}
          disabled={disabled}
        />
      </InputCard.Container>
    </Stack>
  );
};

export default AjustBalanceForm;