import React, { useState } from 'react'
import { useTranslate } from '../utils';
import { View, Text } from 'react-native';
import Button from '../button';
import Overlay from '.';
import Cell from '../cell';
import { DemoPage, DemoCard } from '../configprovider/styles/demo.page';

interface T {
  '84aa6bce': string
  '2a9e4928': string
  abbf9359: string
  ec0d7acf: string
  ce1e18a2: string
}
const OverlayDemo = () => {
  const [translated] = useTranslate<T>({
    'zh-CN': {
      '84aa6bce': '基础用法',
      '2a9e4928': '显示遮罩层',
      abbf9359: '遮罩样式',
      ec0d7acf: '嵌套内容',
      ce1e18a2: '这里是正文',
    },
    'zh-TW': {
      '84aa6bce': '基礎用法',
      '2a9e4928': '顯示遮罩層',
      abbf9359: '遮罩樣式',
      ec0d7acf: '嵌套內容',
      ce1e18a2: '這裡是正文',
    },
    'en-US': {
      '84aa6bce': 'Basic usage',
      '2a9e4928': 'show mask layer',
      abbf9359: 'mask style',
      ec0d7acf: 'nested content',
      ce1e18a2: 'here is the text',
    },
  })

  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [visible3, setVisible3] = useState(false)

  const handleToggleShow = () => {
   
    setVisible(true)
  }
  const handleToggleShow2 = () => {
    setVisible2(true)
  }
  const handleToggleShow3 = () => {
    setVisible3(true)
  }

  const onClose = () => {
    setVisible(false)
  }
  const onClose2 = () => {
    setVisible2(false)
  }
  const onClose3 = () => {
    setVisible3(false)
  }

  return (
    <DemoPage>
        <DemoCard title={translated['84aa6bce']}>
        <Cell>
          <Button type="primary" onPress={handleToggleShow}>
            {translated['2a9e4928']}
          </Button>
          <Overlay visible={visible} onPress={onClose} />
        </Cell>
      </DemoCard>

      <DemoCard title={translated['abbf9359']}>
      <Cell>
          <Button type="primary" onPress={handleToggleShow2}>
            {translated['2a9e4928']}
          </Button>
          <Overlay
            visible={visible2}
            onPress={onClose2}
            overlayStyle={{
              backgroundColor: '#38333333',
            }}
          />
        </Cell>
      </DemoCard>

      <DemoCard title={translated['ec0d7acf']}>
      <Cell>
          <Button type="success" onPress={handleToggleShow3}>
            {translated.ec0d7acf}
          </Button>
          <Overlay visible={visible3} onPress={onClose3} overlayStyle={{ justifyContent: 'center', alignItems: 'center' }}>
          <View style={{ width: 150, height: 150, borderRadius: 8, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }} >
                <Text style={{ color: 'red' }}>这里是正文</Text>
            </View>
          </Overlay>
        </Cell>
        </DemoCard>
    </DemoPage>
  )
}

export default OverlayDemo