import { darken, rgba } from 'polished';
import { space, layout, variant } from 'styled-system';
import { styled, css } from 'styled-components';
import { cssClass } from '../../utils/css-class.js';
const borderlessCSS = css(["padding:0;border-color:transparent;border-width:0 0 1px 0;color:", ";&:focus{box-shadow:none;border-bottom:1px solid ", ";}&:hover{cursor:pointer;}"], ({
  theme
}) => theme.colors.text, ({
  theme
}) => theme.colors.inputBorder);
const sizeVariants = variant({
  prop: 'variant',
  variants: {
    default: {
      fontSize: 'default',
      lineHeight: 'lg'
    },
    sm: {
      fontSize: 'sm',
      lineHeight: 'default'
    },
    lg: {
      fontSize: 'lg',
      lineHeight: 'xl'
    },
    xl: {
      fontSize: 'xl',
      lineHeight: 'xxl'
    },
    xxl: {
      fontSize: 'h1',
      fontWeight: 'light',
      lineHeight: 'x4'
    }
  }
});

/**
 * Prop Types of an Input component.
 * Apart from variant it extends all {@link LayoutProps} and {@link SpaceProps}
 *
 * @memberof Input
 * @alias InputProps
 * @property {string} [...] Other props from {@link LayoutProps}, {@link SpaceProps}
 */

/**
 * Input CSS Styles which can be reused in another input component with styled-components
 *
 * ### Usage:
 *
 * ```
 * import { InputCSS } from '@adminjs/design-system'
 *
 * const MyStyledInput = styled.input`
 *   ${InputCSS}
 * `
 * ```
 * @memberof Input
 * @alias InputCSS
 */
export const InputCSS = css(["box-sizing:border-box;color:", ";background:transparent;border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";font-family:", ";outline:none;&:hover{border-color:", ";}&:focus{border-color:", ";}&:disabled{color:", ";border-color:", ";background-color:", ";}", ";", ";"], ({
  theme
}) => theme.colors.grey100, ({
  theme
}) => theme.colors.inputBorder, ({
  theme
}) => theme.space.xs, ({
  theme
}) => theme.fontSizes.default, ({
  theme
}) => theme.lineHeights.lg, ({
  theme
}) => theme.font, ({
  theme
}) => darken(0.1, theme.colors.inputBorder), ({
  theme
}) => theme.colors.primary100, ({
  theme
}) => rgba(theme.colors.grey80, 0.5), ({
  theme
}) => rgba(theme.colors.inputBorder, 0.5), ({
  theme
}) => rgba(theme.colors.inputBorder, 0.5), ({
  borderless
}) => borderless && borderlessCSS, sizeVariants);

/**
 * @classdesc
 *
 * <img src="components/input.png" />
 *
 * Wrapped `input` html element.
 *
 * ### Usage
 *
 * ```javascript
 * import { Input, InputProps, InputCSS } from '@adminjs/design-system'
 * ```
 *
 * @component
 * @subcategory Atoms
 * @see InputProps
 * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-input--default Storybook}
 * @hideconstructor
 * @example
 * return (
 *   <Box p="xl">
 *      <Label htmlFor="input1">Some example label</Label>
 *      <Input id="input1" width={1/2} />
 *   </Box>
 * )
 * @section design-system
 */
const Input = styled.input.withConfig({
  displayName: "input__Input",
  componentId: "sc-y0u0lk-0"
})(["", ";", ";", ";"], InputCSS, space, layout);
Input.defaultProps = {
  px: 'default',
  py: 'sm',
  className: cssClass('Input')
};
export { Input };
export default Input;