import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  TextInput,
} from 'react-native';


import { MailDisplay } from './mail-display';
import { MailList } from './mail-list';
import { Nav } from './nav';
import { useMail } from '../use-mail';

interface MailProps {
  accounts: {
    label: string;
    email: string;
    icon: React.ReactNode;
  }[];
  mails: [];
}

export function Mail({ accounts, mails }: MailProps) {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [activeTab, setActiveTab] = useState('all');
  const [mail] = useMail();

  const toggleCollapse = () => setIsCollapsed(!isCollapsed);

  return (
    <View style={styles.container}>
      <View style={[styles.sidebar, isCollapsed && styles.collapsedSidebar]}>
        <TouchableOpacity onPress={toggleCollapse} style={styles.collapseButton}>
          
        </TouchableOpacity>
        {!isCollapsed && (
          <>
            
          </>
        )}
      </View>
      <View style={styles.content}>
        <View style={styles.header}>
          <Text style={styles.title}>Inbox</Text>
          <View style={styles.tabs}>
            <TouchableOpacity
              style={[styles.tab, activeTab === 'all' && styles.activeTab]}
              onPress={() => setActiveTab('all')}
            >
              <Text>All mail</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.tab, activeTab === 'unread' && styles.activeTab]}
              onPress={() => setActiveTab('unread')}
            >
              <Text>Unread</Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.searchContainer}>
          
          <TextInput
            style={styles.searchInput}
            placeholder="Search"
            placeholderTextColor="gray"
          />
        </View>
        <ScrollView>
          <MailList
            items={activeTab === 'all' ? mails : mails.filter((item) => !item.read)}
          />
        </ScrollView>
      </View>
      <View style={styles.mailDisplay}>
        <MailDisplay
          mail={mails.find((item) => item.id === mail.selected) || null}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  sidebar: {
    width: 250,
    backgroundColor: '#f0f0f0',
  },
  collapsedSidebar: {
    width: 50,
  },
  collapseButton: {
    padding: 10,
  },
  content: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  tabs: {
    flexDirection: 'row',
  },
  tab: {
    padding: 10,
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: 'blue',
  },
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    margin: 10,
    borderRadius: 5,
  },
  searchIcon: {
    padding: 10,
  },
  searchInput: {
    flex: 1,
    padding: 10,
  },
  mailDisplay: {
    width: '40%',
    borderLeftWidth: 1,
    borderLeftColor: '#e0e0e0',
  },
});