import React from 'react'
import { Text, View } from 'react-native'

import { Input as MinuitInput } from '../Input'
import { BaseButton as MinuitButton } from '../Button'
import Overlay from '../Overlay'

import { Fonts, Palette, gutters } from '../../styles'
import Style from '../../styles/Style'

export const Container = ({ visible, setVisible = () => null, children }) => {
  return (
    <Overlay isVisible={visible}>
      <View style={{ ...Style.containerModal }}>{children}</View>
    </Overlay>
  )
}

export const Title = ({ children }) => {
  return (
    <Text
      style={{
        ...Fonts({
          type: 'title',
          style: {
            textAlign: 'center',
            marginBottom: gutters,
          },
        }),
      }}
    >
      {children}
    </Text>
  )
}

export const Description = ({ children }) => {
  return (
    <Text
      style={{
        ...Fonts({
          type: 'default',
          style: {
            textAlign: 'center',
            marginBottom: gutters / 2,
          },
        }),
      }}
    >
      {children}
    </Text>
  )
}

export const Button = ({ label, onPress, type = 'primary', containerStyle = {} }) => {
  return (
    <MinuitButton
      containerStyle={{
        width: '100%',
        alignSelf: 'center',
        ...containerStyle,
      }}
      text={label}
      onPress={onPress}
      type={type}
    />
  )
}

export const Input = (props) => {
  return <MinuitInput {...props} setValue={props.onChangeText} />
}