import React from 'react';
import { View, Text, ScrollView } from 'react-native';

import Title from '../../components/List/components/Title';

const VersionLine = ({ items, title }: { items: string[]; title: string }) => (
  <View className="rounded bg-secondary-bg p-4">
    <Title classNames="mb-2" text={title} />
    {items.map((item, index) => (
      <Text key={index} className="text-md">
        • {item}
      </Text>
    ))}
  </View>
);

const More = () => {
  const year = new Date().getFullYear();
  const appVersion = require('../../../package.json').version;
  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      <ScrollView>
        <Title classNames="mb-4" text="O aplikaci" />
        <View className="rounded bg-secondary-bg p-4">
          <Text className="text-md">
            Aplikace Kapesní skautIS zpřístupňuje v mobilní verzi vybrané funkce informačního
            systému Junáka (skautIS).
          </Text>
          <Text className="text-md">
            Na vývoji aplikace Kapesní skautIS pracují dobrovolníci z českého skautingu a studenti
            Masarykovy univerzity, jež na aplikaci pracují v rámci jejich závěrečných prací.
            Aplikace je zcela zdarma a bez reklam.
          </Text>
          <Text className="text-md text-warning">
            <Text className="font-bold">Upozornění:</Text> Je zakázáno používat získané kontakty k
            zasílání komerčních sdělení, reklamy a dalšímu nevhodnému kontaktování osob či jednotek.
            Počet získaných kontaktů ve Skautském adresáři je v čase omezen a v případě nevhodného
            používání služby může být přístup k adresáři zakázán.
          </Text>
        </View>
        <Title classNames="my-4" text="Historie změn" />
        <View className="space-y-4">
          <View>
            <VersionLine
              items={['Agenda Kvality', 'Agenda Majetku', 'Vyhledávání majetku']}
              title="V přípravě"
            />
          </View>
          <View>
            <VersionLine
              items={[
                'Detail uživatele',
                'Agenda emailů',
                'Detail jednotky',
                'Detail registrace',
                'Seznam členů jednotky',
                'E-přihláška',
                'Agenda Moje kurzy',
                'Agenda Sněmy',
                'Vyhledávání akcí',
                'Vyhledávání jednotek',
                'Vyhledávání uživatelů',
                'Agenda Obecné akce',
                'Agenda Tábory',
                'Exporty šablon',
              ]}
              title="Version 2.0.0"
            />
          </View>
        </View>
        <View className="mt-4 flex-col items-center">
          <Text className="text-md text-secondary">
            &copy; 2018-{year} Junák - český skaut, z. s.
          </Text>
          <Text className="text-md text-secondary">Verze aplikace: {appVersion}</Text>
        </View>
      </ScrollView>
    </View>
  );
};

export default More;
