import styled from "styled-components/native";
import { StyleSheet } from "react-native";
import { theme } from "data/dataMx";

interface IStylesProps {
  check: boolean;
  active: boolean;
  link: boolean;
}
export const ScrollContainer = styled.ScrollView`
  width: 100%;
  flex-direction: column;
  flex: 1;
`;

export const TopContainer = styled.View`
  width: 100%;
`;
export const HeaderContainer = styled.View`
  flex-direction: row;
  padding: 4px 30px 16px 24px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
`;

export const FiltersContainer = styled(TopContainer)``;

export const ButtonContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  height: 12%;
  margin: 10px;
`;

export const BottomButtonContainer = styled.View`
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin: 20px 0;
`;

export const FilterRow = styled.View`
  flex-direction: row;
  justify-content: flex-start;
  background-color: ${({ check, active, link }: IStylesProps) =>
    check
      ? theme.neutral200
      : active && link
      ? theme.neutral200
      : theme.neutral100};
  align-content: center;
  align-items: center;
  padding: 10px 24px;
  input[type="checkbox"]:checked {
    background-color: ${theme.primary};
    border: 2px solid ${theme.primary};
  }
`;

export const SortingRow = styled.View`
  background-color: ${theme.neutral200};
  height: 100px;
  padding: 24px;
`;

export const CollapsiblePanel = styled.View`
  background-color: ${theme.neutral200};
  width: 100%;
`;

export const Bar = styled.View`
  width: 24.75px;
  height: 3px;
  background-color: ${theme.neutral600};
  margin: 0 0 3px 0;
  transition: 0.4s;
`;

export const ShowMore = styled.TouchableOpacity`
  padding: 8px 24px;
  background-color: ${theme.neutral200};
`;
export const DismissContainer = styled.TouchableOpacity``;
export const ButtonRowContainer = styled.View``;

export const Styles = StyleSheet.create({
  barUpper: {
    transform: [
      {
        rotate: "-45deg",
      },
      {
        translateX: -3,
      },
      {
        translateY: 3,
      },
    ],
  },
  hide: {
    opacity: 0,
  },
  barDown: {
    transform: [
      {
        rotate: "45deg",
      },
      {
        translateX: -5,
      },
      {
        translateY: -6,
      },
    ],
  },
});
