import {
  Box,
  InputBase,
  inputBaseClasses,
  FormControl as MuiFormControl,
  styled,
} from '@mui/material'
import type React from 'react'
import { CardTitle } from '../Card/CardTitle.js'

export const maxInputFontSize = 24
export const minInputFontSize = 14

export const FormContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
  Box
)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  padding: theme.spacing(2),
}))

export const FormControl: React.FC<
  React.ComponentProps<typeof MuiFormControl>
> = styled(MuiFormControl)(() => ({
  height: 40,
}))

export const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(
  InputBase
)(({ theme }) => ({
  fontSize: 24,
  fontWeight: 700,
  boxShadow: 'none',
  lineHeight: 1.5,
  [`.${inputBaseClasses.input}`]: {
    height: 24,
    padding: theme.spacing(0, 0, 0, 2),
  },
  '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button':
    {
      WebkitAppearance: 'none',
      margin: 0,
    },
  '& input[type="number"]': {
    MozAppearance: 'textfield',
  },
  [`&.${inputBaseClasses.disabled}`]: {
    color: 'inherit',
  },
  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
    WebkitTextFillColor: 'unset',
  },
}))

export const AmountInputCardTitle: React.FC<
  React.ComponentProps<typeof CardTitle>
> = styled(CardTitle)(({ theme }) => ({
  padding: theme.spacing(0),
}))

export const AmountInputCardHeader: React.FC<React.ComponentProps<typeof Box>> =
  styled(Box)(({ theme }) => ({
    padding: theme.spacing(2, 2, 0, 2),
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 30,
  }))
