import React from 'react';
import styled from 'styled-components';
import { Dropdown, IOptionsProps } from '../../Dropdown';
import { SearchBar } from '../SearchBar/SearchBar';

interface IScrollableContentProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  emptyMessage?: string;
  className?: string;
  filterOptions?: {
    options: IOptionsProps[];
    selectedOption: string;
    onOptionChange: (value: string) => void;
  };
  searchOptions?: {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
  };
  layout?: 'grid' | 'list';
  gridColumns?: number;
  maxHeight?: string;
}

export const ScrollableContent = <T extends unknown>({
  items,
  renderItem,
  emptyMessage = 'No items found',
  className,
  filterOptions,
  searchOptions,
  layout = 'list',
  gridColumns = 4,
  maxHeight = '500px',
}: IScrollableContentProps<T>): React.ReactElement => {
  if (items.length === 0) {
    return <EmptyMessage>{emptyMessage}</EmptyMessage>;
  }

  return (
    <Container className={className}>
      {(searchOptions || filterOptions) && (
        <HeaderContainer>
          <HeaderContent>
            {searchOptions && (
              <SearchContainer>
                <StyledSearchBar
                  value={searchOptions.value}
                  onChange={searchOptions.onChange}
                  placeholder={searchOptions.placeholder || 'Search...'}
                />
              </SearchContainer>
            )}
            {filterOptions && (
              <FilterContainer>
                <StyledDropdown
                  options={filterOptions.options}
                  onChange={filterOptions.onOptionChange}
                  width="200px"
                />
              </FilterContainer>
            )}
          </HeaderContent>
        </HeaderContainer>
      )}
      <Content
        className={`ScrollableContent-content ${layout}`}
        $gridColumns={gridColumns}
        $maxHeight={maxHeight}
      >
        {items.map((item, index) => (
          <div key={index} className="ScrollableContent-item">
            {renderItem(item)}
          </div>
        ))}
      </Content>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
`;

const HeaderContainer = styled.div`
  flex-shrink: 0;
`;

const HeaderContent = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 4px;
`;

const SearchContainer = styled.div`
  flex: 1;
`;

const FilterContainer = styled.div`
  display: flex;
  justify-content: flex-end;
`;

const StyledSearchBar = styled(SearchBar)`
  width: 100%;
`;

const StyledDropdown = styled(Dropdown)`
  min-width: 150px;
`;

const Content = styled.div<{ $gridColumns: number; $maxHeight: string }>`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 1rem;
  max-height: ${props => props.$maxHeight};
  overflow-y: auto;
  overflow-x: hidden;

  &.grid {
    display: grid;
    grid-template-columns: repeat(
      ${props => props.$gridColumns},
      minmax(0, 1fr)
    );
    gap: 1rem;
    align-items: start;

    .ScrollableContent-item {
      display: flex;
      align-items: flex-start;
    }
  }

  &.list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
`;

const EmptyMessage = styled.div`
  text-align: center;
  color: #9ca3af;
  padding: 2rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
`;
