import { Input, InputProps, Group, Text } from "@mantine/core";
import { CheckFat, Phone } from "@phosphor-icons/react";
import { IMaskInput } from "react-imask";
import { Trans, useLingui } from "@lingui/react/macro";

interface PhoneNumberInputProps extends InputProps {
  id: string;
  value?: string;
  onChange: (value: string) => void;
  label: string;
  description?: string;
  error?: string;
}

const PhoneNumberInput: React.FC<PhoneNumberInputProps> = ({
  id,
  value,
  onChange,
  label,
  description,
  error,
  ...props
}) => {
  const { t } = useLingui();
  return (
    <Input.Wrapper
      id={id}
      label={label}
      description={description}
      error={error}
    >
      <Input
        id={id}
        component={IMaskInput}
        mask="(000) 000-0000"
        leftSection={
          <Group gap={2}>
            <Phone size={20} /> &nbsp;{" "}
            <Text c="dimmed" size="sm">
              <Trans>+1</Trans>
            </Text>
          </Group>
        }
        leftSectionWidth={50}
        leftSectionProps={{ style: { padding: 0 } }}
        placeholder={t`(713) 867-5309`}
        onAccept={(_, mask) => onChange(mask.unmaskedValue)}
        rightSection={
          value?.length === 10 && (
            <CheckFat color="green" size={20} weight="fill" />
          )
        }
        value={value}
        {...props}
      />
    </Input.Wrapper>
  );
};

export default PhoneNumberInput;
