/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  SafeAreaView,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import Button from '@hycomponents-native/button';
import Checkbox from '@hycomponents-native/checkbox';
import Radio from '@hycomponents-native/radio';
import Badge from '@hycomponents-native/badge';
import Input from '@hycomponents-native/input';
import Icon from '@hycomponents-native/icon';
import InputV2 from '@hycomponents-native/inputv2'
import Slider from '@hycomponents-native/slider';

import { ThemeProvider } from '@hycomponents-native/theme';

const App: () => React$Node = () => {
  const [touched, setTouched] = React.useState(false);

  React.useEffect(() => {
    setTimeout(() => {
      setTouched(true)
    }, 3000);
  }, []);

  return (
    <ThemeProvider>
      <StatusBar barStyle="dark-content" />
      <ScrollView>
        <SafeAreaView>
          
          <View>
            <Text>
              Input v2
            </Text>
            <InputV2
              meta={{ touched: true, error: 'jasidijasd' }}
              positiveMessage="Cnpj preenchido corretamente"
              label="alalala"
              placeholder="CNPJ - sem traços ou pontos"
            />
          </View>

        <View style={{ padding: 24 }}>
          <Badge status="gelo" value="alalalal" />
        </View>

        <Input placeholder="aalla" leftIcon={(
            <Icon name={'eye'} />
					)}/>

        <View style={{ padding: 24 }}>
          <Radio checked={touched} enableBackground title="Feminino" />
          <Radio checked={!touched} enableBackground title="Masculino" />
        </View>

        <View style={{ padding: 24 }}>
          <Checkbox checked title="Feminino" />
          <Checkbox title="Masculino" />
        </View>

        <View style={{ padding: 24 }}>
          <Button
            title="primary - standard"
            type="primary"
            unique="unique"
          />

          <Button
            title="primary - standard"
            type="secondary"
            unique="unique"
          />

          <Button
            title="primary - standard"
            type="primary"
            unique="unique"
            disabled
          />

          <Button
            title="primary - standard"
            type="primary"
          />

          <Button
            title="primary - disabled"
            type="primary"
            disabled
          />     

          <Button
            title="primary - loading"
            type="primary"
            loading
          />

          <Button
            title="secondary - standard"
            type="secondary"
          />
          <Button
            title="secondary - disabled"
            type="secondary"
            disabled
          />
          <Button
            title="secondary - loading"
            type="secondary"
            loading
          />

          <Button
            type="tertiary"
            title="tertiary - standard"
          />
          <Button
            title="tertiary - disabled"
            type="tertiary"
            disabled
          />
          <Button
            title="tertiary - loading"
            type="tertiary"
            loading
          />
        </View>
        </SafeAreaView>

      </ScrollView>
    </ThemeProvider>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;
