import styled from 'styled-components';
import {View, Image} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import Typography from '../ui/typography';
import {createAnimationView} from '../animations';

export const EditProfileContainer = styled(View)`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: ${({theme: {spacing}}) => spacing[4]}px;
`;

export const ImageList = styled(View)`
  min-height: 400px;
  padding: ${({theme: {spacing}}) => spacing[1]}px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: rgb(64, 64, 64);
`;

export const ProfileImgContainer = styled(View)`
  width: 90px;
  height: 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const ProfileImg = styled(Image)`
  width: 90px;
  height: 90px;
  padding: ${({theme: {spacing}}) => spacing[2]}px;
`;

export const ProfileImageSelector = styled(View)`
  width: 50px;
  height: 50px;
  position: absolute;
`;

export const LabelName = styled(Typography)`
  background: rgb(64, 64, 64);
  padding: ${({theme: {spacing}}) => spacing[2]}px;
`;

export const ActionsContainer = styled(View)`
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  padding-top: 20px;
`;

export const ImageSelectedContainer = styled(View)`
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;

  align-items: center;
`;

export const ImageSelected = styled(Image)`
  width: 200px;
  height: 200px;
`;

export const ShowSection = createAnimationView(
  {opacity: {from: 0, to: 1}, translateY: {from: 50, to: 0}},
  ({opacity, translateY}) => ({
    opacity,
    transform: [{translateY}],
  }),
);

export const ShowZoom = createAnimationView(
  {opacity: {from: 0, to: 1}, scale: {from: 0, to: 1}},
  ({opacity, scale}) => ({
    opacity,
    transform: [{scale}],
  }),
);