import { Linking, Text, View, TouchableOpacity } from "react-native";
import {
  Foundation,
  FontAwesome,
  Ionicons,
  MaterialCommunityIcons,
} from "@expo/vector-icons";
import Icon from "react-native-vector-icons/Entypo";
import { TextBox } from "../atom/TextBox";
import { TicketBox } from "../atom/TicketBox";
import { ListItem } from "native-base";

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="#0099CC"
        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={() =>
          Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
        }
      >
        <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>
      <View
        style={{
          backgroundColor: "#0099CC",
          borderRadius: 10,
          margin: 10,
          borderColor: "black",
          borderWidth: 2,
        }}
      >
        <View
          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
        >
          <MaterialCommunityIcons
            name="twitter"
            style={{ padding: 5 }}
            color="white"
            size={30}
          />
          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
            JR四国公式Twitter一族
          </Text>
        </View>
        <View
          style={{
            padding: 10,
            backgroundColor: "white",
            borderBottomLeftRadius: 10,
            borderBottomRightRadius: 10,
          }}
        >
          {[
            {
              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 onPress={() => Linking.openURL(d.url)}>
              <Text>{d.name}</Text>
              <View style={{ flex: 1 }} />
              <Icon name="chevron-right" size={20} />
            </ListItem>
          ))}
        </View>
      </View>
      <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="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")}
    /> */}
    </>
  );
};