import React, { useCallback, useMemo } from "react";
import { View } from "react-native";
import { background } from "../../assets";
import useSearch from "../../hooks/useSearch";
import Page from "../../layouts/Page";
import { gutters } from "../../styles";
import ResearchHeader from "./components/ResearchHeader";
import SearchResultsList from "./components/SearchResultsList";

const Research = () => {
  const {
    search,
    setSearch,
    selected,
    setSelected,
    users = [],
    musics = [],
    playbacks = [],
    loading,
  } = useSearch();

  const toggleSelected = useCallback(
    (value) => {
      setSelected((previous) => (previous === value ? null : value));
    },
    [setSelected],
  );

  const musicResults = useMemo(
    () => (Array.isArray(musics) ? musics : []),
    [musics],
  );

  const playbackResults = useMemo(
    () => (Array.isArray(playbacks) ? playbacks : []),
    [playbacks],
  );

  const userResults = useMemo(
    () => (Array.isArray(users) ? users : []),
    [users],
  );

  const musicsLoading = loading;
  const playbacksLoading = loading;
  const usersLoading = loading;

  return (
    <Page
      headerType="NAVIGATION"
      backgroundImg={background.libraryBG2}
      title="Recherche"
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
    >
      <View style={{ flex: 1, gap: 10 }}>
        <ResearchHeader
          onPress={toggleSelected}
          selected={selected}
          searchValue={search}
          onChangeSearch={setSearch}
        />
        <SearchResultsList
          selected={selected}
          musics={musicResults}
          musicsLoading={musicsLoading}
          playbacks={playbackResults}
          playbacksLoading={playbacksLoading}
          users={userResults}
          usersLoading={usersLoading}
        />
      </View>
    </Page>
  );
};

export default Research;