import React, { useState } from "react";
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Linking,
  StyleSheet,
  Dimensions,
  Modal,
  TextInput,
  ScrollView,
} from "react-native";
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";

type Props = {
  visible: boolean;
  onClose: () => void;
};

const FormStore = ({ visible, onClose }: Props) => {
  return (
    <Modal visible={visible} animationType="fade" transparent>
      <View style={styles.overlay}>
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={styles.headerText}>Giới thiệu cửa hàng mới</Text>
            <TouchableOpacity onPress={onClose}>
              <Text style={styles.closeBtn}>
                <FontAwesome5 name="times" size={20} color="black" />
              </Text>
            </TouchableOpacity>
          </View>

          <View style={styles.item}>
            <Text style={styles.label}>Tên cửa hàng</Text>
            <TextInput
              style={styles.input}
              placeholder="Mời bạn nhập tên cửa hàng..."
            />
          </View>
          <View style={styles.item}>
            <Text style={styles.label}>Website</Text>
            <TextInput
              style={styles.input}
              placeholder="Mời bạn nhập link website ..."
            />
          </View>

          <View style={styles.item}>
            <Text style={styles.label}>Tỉnh thành</Text>
            <TextInput
              style={styles.input}
              placeholder="Mời bạn nhập tỉnh thành..."
            />
          </View>
          <View style={styles.item}>
            <Text style={styles.label}>Địa chỉ</Text>
            <TextInput
              style={styles.input}
              placeholder="Mời bạn nhập địa chỉ cửa hàng..."
            />
          </View>
          <View style={styles.item}>
            <Text style={styles.label}>Mô tả</Text>
            <TextInput
              style={styles.input}
              placeholder="Mời bạn nhập mô tả..."
            />
          </View>
          <View style={styles.item}>
            <Text style={styles.label}>Thông tin người liên hệ</Text>
            <TextInput
              style={styles.input}
              placeholder="Mời bạn nhập thông tin..."
            />
          </View>
          <TouchableOpacity style={styles.submitBtn}>
            <Text style={styles.submitText}>Gửi thông tin</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};

export default FormStore;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "#00000080",
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    width: "95%",
    backgroundColor: "white",
    borderRadius: 12,
    padding: 10,
    maxHeight: "90%",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderColor: "#E4E4E4",
    paddingBottom: 15,
  },
  headerText: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    flex: 1,
  },
  closeBtn: {
    fontSize: 22,
    color: "#808080",
  },
  item: {
    marginTop: 15,
  },
  label: {
    fontWeight: "bold",
    fontSize: 13,
    marginBottom: 7,
  },
  input: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#B1B1B1",
    borderRadius: 4,
    padding: 10,
  },
  submitBtn: {
    marginTop: 15,
    height: 45,
    width: "100%",
    backgroundColor: "#C8B7FF",
    borderRadius: 4,
    justifyContent: "center",
    alignItems: "center",
  },
  submitText: {
    color: "white",
    fontWeight: "bold",
  },
});
