import React, { useRef } from "react";
import { View, Platform, Text } from "react-native";
import ActionSheet ,{ ScrollView } from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { ListItem } from "@rneui/themed";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Linking } from "react-native";
import TouchableScale from "react-native-touchable-scale";
export const Social = () => {
  const actionSheetRef = useRef(null);
  const insets = useSafeAreaInsets();

  return (
    <ActionSheet
      gestureEnabled
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      isModal={Platform.OS == "ios"}
      containerStyle={
        Platform.OS == "android"
          ? {
              paddingBottom: insets.bottom,
            }
          : {}
      }
      useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <View
        style={{
          backgroundColor: "#0099CC",
          borderTopRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
          height: "100%",
        }}
      >
        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>

          <View
            style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
          >
            <MaterialCommunityIcons
              name="web"
              style={{ padding: 5 }}
              color="white"
              size={30}
            />
            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
              JR四国公式SNS一族
            </Text>
          </View>
          <ScrollView
            style={{
              padding: 10,
              backgroundColor: "white",
              borderBottomLeftRadius: 10,
              borderBottomRightRadius: 10,
              flex:1
            }}
          >
            {[
              {
                url: "https://twitter.com/jr_shikoku_info",
                name: "ＪＲ四国列車運行情報",
              },

              {
                url: "https://twitter.com/JRshikoku_eigyo",
                name: "JR四国営業部【公式】",
              },
              {
                url: "https://twitter.com/JRshikoku_tokyo",
                name: "JR四国 東京営業情報【公式】",
              },
              {
                url: "https://twitter.com/JRshikoku_osaka",
                name: "JR四国 大阪営業部【公式】",
              },
              {
                url: "https://twitter.com/jrs_matsuyama",
                name: "JR四国 松山駅 【公式】",
              },
              {
                url: "https://twitter.com/jrshikoku_kochi",
                name: "JR四国 高知駅【公式】",
              },
              {
                url: "https://twitter.com/jr_tokust",
                name: "JR四国 徳島駅【公式】",
              },
              {
                url: "https://twitter.com/jrshikoku_uwjm",
                name: "JR四国 宇和島駅【公式】",
              },
              {
                url: "https://twitter.com/jrshikoku_wkama",
                name: "JR四国 ワープ高松支店【公式】",
              },
              {
                url: "https://twitter.com/JRshikoku_wkoch",
                name: "JR四国 ワープ高知支店【公式】",
              },
              {
                url: "https://twitter.com/Yoakemonogatari",
                name: "志国土佐　時代の夜明けのものがたり【公式】",
              },
              {
                url: "https://twitter.com/Smile_Eki_Chan",
                name: "すまいるえきちゃん♡JR四国【公式】",
              },
              {
                url: "https://twitter.com/sper_ponchan",
                name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
              },
            ].map((d) => (
              <ListItem
                bottomDivider
                onPress={() => Linking.openURL(d.url)}
                key={d.url}
                friction={90} //
                tension={100} // These props are passed to the parent component (here TouchableScale)
                activeScale={0.95} //
                Component={TouchableScale}
              >
                <ListItem.Content>
                  <ListItem.Title>{d.name}</ListItem.Title>
                </ListItem.Content>
                <ListItem.Chevron />
              </ListItem>
            ))}
          </ScrollView>
      </View>
    </ActionSheet>
  );
};