import { Linking, Text, View, TouchableOpacity } from "react-native";
import {
  Foundation,
  FontAwesome,
  Ionicons,
  MaterialCommunityIcons,
} from "@expo/vector-icons";
import { ListItem } from "@rneui/themed";
import TouchableScale from "react-native-touchable-scale";
import Icon from "react-native-vector-icons/Entypo";
import { TextBox } from "../atom/TextBox";
import { TicketBox } from "../atom/TicketBox";
import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
import { SheetManager } from "react-native-actions-sheet";

export const FixedContentBottom = (props) => {
  return (
    <>
      {props.children}

      <View style={{ flexDirection: "row" }}>
        <TicketBox
          backgroundColor={"#AD7FA8"}
          icon={<Foundation name="ticket" color="white" size={50} />}
          flex={1}
          onPressButton={() =>
            Linking.openURL("https://www.jr-eki.com/ticket/brand")
          }
        >
          トクトク切符
        </TicketBox>
        <TicketBox
          backgroundColor={"#8F5902"}
          icon={<FontAwesome name="first-order" color="white" size={50} />}
          flex={1}
          onPressButton={() =>
            Linking.openURL(
              "https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/"
            )
          }
        >
          観光列車
        </TicketBox>
        <TicketBox
          backgroundColor={"#888A85"}
          icon={<Ionicons name="flag" color="white" size={50} />}
          flex={1}
          onPressButton={() =>
            Linking.openURL("https://www.jr-eki.com/tour/brand")
          }
        >
          旅行ツアー
        </TicketBox>
      </View>
      <TextBox
        backgroundColor="#ed86b5"
        flex={1}
        onPressButton={() =>
          Linking.openURL("https://www.jr-eki.com/smart-eki/index.html")
        }
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          スマートえきちゃん
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          JR四国のチケットレススマホアプリです。
        </Text>
      </TextBox>
      <TextBox
        backgroundColor="#0099CC"
        flex={1}
        onPressButton={() =>
          SheetManager.show("SpecialTrainInfo", {
            payload: { navigate: props.navigate },
          })
        }
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          臨時列車などのお知らせ
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          区間縮小・計画運休・イベント・季節臨時列車など
        </Text>
      </TextBox>
      <TextBox
        backgroundColor="#0099CC"
        flex={1}
        onPressButton={() =>
          Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
        }
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          ニュースリリース
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          公式プレス記事はこちら
        </Text>
      </TextBox>
      <TextBox
        backgroundColor="#0099CC"
        flex={1}
        onPressButton={() =>
          Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
        }
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          定期運賃計算
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          通常/学生/快て〜き等はこちら
        </Text>
      </TextBox>
      <TextBox
        backgroundColor="#0099CC"
        flex={1}
        onPressButton={() =>
          Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
        }
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          JR四国のお店・サービス
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          JR四国グループの施設をご案内
        </Text>
      </TextBox>
      <View style={{ flexDirection: "row" }}>
        <TouchableOpacity
          style={{
            flex: 1,
            backgroundColor: "#729FCF",
            borderColor: "#0099CC",
            padding: 10,
            borderWidth: 1,
            margin: 2,
            alignItems: "center",
          }}
          onPress={() => Linking.openURL("https://www.jr-odekake.net/smt/")}
        >
          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
            時刻・運賃計算
          </Text>
          <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
            (マイ・ダイヤ)
          </Text>
          <Foundation name="yen" color="white" size={50} />
          <Text style={{ color: "white" }}>
            マイ・ダイヤはJR西日本提供のサービスです。
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            flex: 1,
            backgroundColor: "#8AE234",
            borderColor: "#0099CC",
            padding: 10,
            borderWidth: 1,
            margin: 2,
            alignItems: "center",
          }}
          onPress={() => Linking.openURL("tel:0570-00-4592")}
        >
          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
            JR四国案内センター
          </Text>
          <Foundation name="telephone" color="white" size={50} />
          <Text style={{ color: "white" }}>0570-00-4592</Text>
          <Text style={{ color: "white" }}>(8:00~20:00 年中無休)</Text>
          <Text style={{ color: "white" }}>(通話料がかかります)</Text>
        </TouchableOpacity>
      </View>
      <TextBox
        backgroundColor="#0099CC"
        flex={1}
        onPressButton={() =>
          SheetManager.show("Social")
        }
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          ソーシャルメディア
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          JR四国のSNS一覧です。
        </Text>
      </TextBox>
      <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
      <TextBox
        backgroundColor="#8c00d6"
        flex={1}
        onPressButton={() => props.navigate("AllTrainIDList")}
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          列番探索
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          データベースに存在する全列車のダイヤを探索
        </Text>
      </TextBox>
      <Text style={{ fontWeight: "bold", fontSize: 20 }}>その他</Text>
      <TextBox
        backgroundColor="rgb(88, 101, 242)"
        flex={1}
        onPressButton={() => Linking.openURL("https://twitter.com/Xprocess_main/status/1955242437817012300")}
      
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          公式Discordのご案内
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          皆さんの目撃情報をアプリに反映しませんか？Discordに登録して運用を報告しましょう！
        </Text>
      </TextBox>
      <TextBox
        backgroundColor="linear-gradient(120deg, rgba(247,135,54,0.208) 0%, rgba(54,125,247,0.208) 100%)"
        flex={1}
        onPressButton={() =>
          props.navigate("howto", {
            info: "https://xprocess.haruk.in/tags/JR%E5%9B%9B%E5%9B%BD%E5%88%97%E8%BB%8A%E4%BD%8D%E7%BD%AE%E6%83%85%E5%A0%B1%E3%82%A2%E3%83%97%E3%83%AA/",
            goTo: "menu",
          })
        }
      >
        <Text style={{ color: "black", fontWeight: "bold", fontSize: 20 }}>
          アプリの更新情報
        </Text>
        <Text style={{ color: "black", fontSize: 18 }}>
          過去のアプリの更新履歴が表示できます。
        </Text>
      </TextBox>
      <TextBox
        backgroundColor="black"
        flex={1}
        onPressButton={() => props.navigate("setting")}
      >
        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
          アプリの設定
        </Text>
        <Text style={{ color: "white", fontSize: 18 }}>
          アプリの設定画面を表示します。
        </Text>
      </TextBox>
      {/* 
    <SvgUri
      width="200"
      height="200"
      source={require("./assets/トレインビジョン関係/1.svg")}
    /> */}
    </>
  );
};