import { useTranslation } from 'react-i18next';

// ** MUI Imports
import { makeStyles } from '@material-ui/core/styles';
import { Grid, IconButton } from '@mui/material';

// ** MUI Icons
import { Cellphone, Close, EmailMultipleOutline, MapMarkerOutline, Web } from 'mdi-material-ui';

// ** Utils
import phoneTypeItems from 'src/views/forms/utils/phoneTypes';
import MailableItems from 'src/views/forms/utils/mailableTypes';
import AddressItems from 'src/views/forms/utils/addressItems';
import socialNetworkTypeItems from 'src/views/forms/utils/networkTypes';

// ** Custom Components Imports
const useStyles = makeStyles({
  input: {
    '& input[type=number]': {
      '-moz-appearance': 'textfield',
    },
    '& input[type=number]::-webkit-outer-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
    '& input[type=number]::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
  },
});

// ** Components
import TextForm from 'src/components/text-form';
import SelectForm from 'src/components/select-form';

const fieldProps = {
  fields: {
    phone: {
      isRequired: true,
      label: 'general.phone',
      textTranslations: 'general.phone',
      placeholder: 'Telefono',
      icon: <Cellphone />,
    },
    email: {
      label: 'login.email',
      textTranslations: 'login.email',
      placeholder: 'login.email',
      useTranslation: true,
      icon: <EmailMultipleOutline />,
    },
    address: {
      label: 'general.address',
      textTranslations: 'general.address',
      placeholder: 'general.address',
      useTranslation: true,
      icon: <MapMarkerOutline />,
    },
    socialNetwork: {
      label: 'general.network',
      textTranslations: 'general.network',
      placeholder: 'general.network',
      useTranslation: true,
      icon: <Web />,
    },
  },
  selects: {
    phone: {
      isRequired: true,
      items: phoneTypeItems,
      label: 'general.type',
      textTranslations: 'general.phone',
    },
    email: {
      items: MailableItems,
      label: 'general.type',
      textTranslations: 'general.type',
    },
    address: {
      items: AddressItems,
      label: 'general.type',
      textTranslations: 'general.type',
    },
    socialNetwork: {
      items: socialNetworkTypeItems,
      label: 'general.type',
      textTranslations: 'general.type',
    },
  },
};

const DeleteButton = ({ deleteCallback, index }) => (
  <Grid item xs={1} sx={{ margin: 'auto 0' }}>
    <IconButton onClick={() => deleteCallback(index)}>
      <Close />
    </IconButton>
  </Grid>
);

const Select = ({ index, fieldName, control, errors, deleteCallback }) => {
  const classes = useStyles();

  const { t } = useTranslation();

  return (
    <>
      <Grid item xs={8}>
        <TextForm
          control={control}
          name={`${fieldName}[${index}].value`}
          label={fieldProps.fields[fieldName].label}
          isRequired={fieldProps.fields[fieldName].isRequired && index === 0}
          errorName={errors[fieldName] && errors[fieldName][index]?.value}
          textTranslations={fieldProps.fields[fieldName].textTranslations}
          placeholder={
            fieldProps.fields[fieldName].isRequired
              ? t(fieldProps.fields[fieldName].placeholder) + '*'
              : t(fieldProps.fields[fieldName].placeholder)
          }
          onKeyPress={event => {
            if (event?.key === '-' || event?.key === '+') event.preventDefault();
          }}
          className={classes.input}
          icon={fieldProps.fields[fieldName].icon}
        />
      </Grid>
      <Grid item xs={index > 0 ? 3 : 4}>
        <SelectForm
          isRequired={fieldProps.selects[fieldName].isRequired && index === 0}
          control={control}
          items={fieldProps.selects[fieldName].items}
          name={`${fieldName}[${index}].type`} // String example > phone[0].type
          label={fieldProps.selects[fieldName].label}
          errorName={errors[fieldName] && errors[fieldName][index]?.type}
          textTranslations={fieldProps.selects[fieldName].textTranslations}
        />
      </Grid>
      {index > 0 && <DeleteButton deleteCallback={deleteCallback} index={index} />}
    </>
  );
};

export default Select;