import styled from 'styled-components';
import {
  ButtonProps,
  SwitchActiveColorOverwrite,
  SwitchActiveColorOverwriteType,
} from '../../interfaces';
import { ThemeInterface } from '../../typings/styled-components';

export const StyledButton = styled.button<ButtonProps>`
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  font-family: ${({ theme }) => theme.fonts.primary}, sans-serif;
  border-radius: 4px;
  transition: 0.3s;
  padding: ${({ iconButton, padding }) =>
    padding ? padding : iconButton ? '0' : '0 24px'};
  display: flex;
  flex-direction: ${({ iconPosition }) =>
    iconPosition === 'right' ? 'row-reverse' : 'row'};
  align-items: center;
  justify-content: center;

  ${({ size, iconPosition, iconButton, padding }) => {
    switch (size) {
      case 'small':
        return `
					height: 24px;
					font-size: 12px;
					padding: ${padding ? padding : iconButton ? '0' : '0 8px'};
					${iconButton ? 'width: 24px;' : ''}

					svg {
						${iconPosition === 'right' ? 'margin-left: 4px;' : 'margin-right: 4px;'}
						width: 13px;
						height: 13px;
						${iconButton ? 'margin: 0 0 0 0' : ''};
					}
				`;

      default:
        return `
					height: 40px;
					${iconButton ? 'width: 40px;' : ''}

					svg {
						${iconPosition === 'right' ? 'margin-left: 8px;' : 'margin-right: 8px;'}
						width: 20px;
						height: 20px;
						${iconButton ? 'margin: 0' : ''};
					}
				`;
    }
  }}

  ${({ fullWidth }) => (fullWidth ? 'width: 100%;' : null)}

  ${({
    variant,
    theme,
    disabled,
    switchActive,
    switchActiveColorOverwrite,
  }) => {
    if (variant === 'primary-neutral')
      return `
					color: ${theme.colors.neutral[0]};
					background: ${theme.colors.neutral[900]};
					border: 1px solid ${theme.colors.neutral[800]};
					&:hover {
						${!disabled ? `background: ${theme.colors.neutral[600]}` : null};
					}
					&:active {
						${!disabled ? `background: ${theme.colors.neutral[900]}` : null};
					}
				`;

    if (variant === 'primary-brand')
      return `
					color: ${theme.colors.neutral[900]};
					background: ${theme.colors.primary[500]};
					border: 1px solid ${theme.colors.primary[500]};
					&:hover {
						${!disabled ? `background: ${theme.colors.primary[400]}` : null};
					}
					&:active {
						${!disabled ? `background: ${theme.colors.primary[600]}` : null};
					}
				`;

    if (variant === 'secondary-light')
      return `
			color: ${theme.colors.neutral[700]};
			background: ${theme.colors.neutral[0]};
			border: 1px solid ${theme.colors.neutral[100]};
			&:hover {
				color: ${theme.colors.neutral[800]};
				${!disabled ? `border: 1px solid ${theme.colors.neutral[500]}` : null};
			}
			&:active {
				color: ${theme.colors.neutral[800]};
				${!disabled ? `border: 1px solid ${theme.colors.neutral[500]}` : null};
			}
		`;

    if (variant === 'switch')
      return `
				color: ${generateSwitchColor(switchActive, switchActiveColorOverwrite, theme)};
				background: ${generateSwitchBackground(
          switchActive,
          switchActiveColorOverwrite,
          theme
        )};
				border: 1px solid ${
          switchActive && switchActiveColorOverwrite
            ? generateSwitchOverwriteColor(
                theme,
                switchActiveColorOverwrite,
                'border'
              )
            : switchActive
            ? theme.colors.neutral[900]
            : theme.colors.neutral[100]
        };
				&:hover {
					${
            !disabled && !switchActiveColorOverwrite
              ? `border: 1px solid ${
                  switchActive
                    ? switchActiveColorOverwrite
                      ? generateSwitchOverwriteColor(
                          theme,
                          switchActiveColorOverwrite,
                          'normal'
                        )
                      : theme.colors.neutral[600]
                    : theme.colors.neutral[500]
                }`
              : null
          };
						${
              !disabled && switchActive
                ? `background: ${
                    switchActiveColorOverwrite
                      ? generateSwitchOverwriteColor(
                          theme,
                          switchActiveColorOverwrite,
                          'hover'
                        )
                      : theme.colors.neutral[600]
                  }`
                : null
            };
				
				}
				&:active {
					${
            !disabled
              ? `border: 1px solid ${
                  switchActive
                    ? switchActiveColorOverwrite
                      ? generateSwitchOverwriteColor(
                          theme,
                          switchActiveColorOverwrite,
                          'normal'
                        )
                      : theme.colors.neutral[900]
                    : theme.colors.neutral[500]
                }`
              : null
          };
					${
            !disabled
              ? `background: ${
                  switchActive
                    ? switchActiveColorOverwrite
                      ? generateSwitchOverwriteColor(
                          theme,
                          switchActiveColorOverwrite,
                          'active'
                        )
                      : theme.colors.neutral[900]
                    : theme.colors.neutral[0]
                }`
              : null
          };
				}
			`;

    if (variant === 'secondary-dark')
      return `
					color: ${theme.colors.neutral[700]};
					background: ${theme.colors.neutral[0]};
					border: 1px solid ${theme.colors.neutral[600]};
					&:hover {
						color: ${theme.colors.neutral[800]};
						${!disabled ? `border: 1px solid ${theme.colors.neutral[900]}` : null};
					}
					&:active {
						color: ${theme.colors.neutral[800]};
						${!disabled ? `border: 1px solid ${theme.colors.neutral[900]}` : null};
					}
				`;

    if (variant === 'transparent')
      return `
					background: transparent;
					border: 1px solid transparent;
				`;

    if (variant === 'branded-twitter') {
      return `
					background: #F4FAFE;
					border: 1px solid #2AA3EF;
					& > span {
						color: ${theme.colors.neutral[900]};
					}
				`;
    }
    if (variant === 'branded-pinterest') {
      return `
							background: #FCF3F4;
							border: 1px solid #BB0E23;
							& > span {
								color: ${theme.colors.neutral[900]};
							}
						`;
    }
    return null;
  }}

	${({ disabled }) =>
    disabled
      ? `
			opacity: 0.5;
			cursor: default;
		`
      : null}

	${({ width }) =>
    width &&
    `
			width: ${width}px;
		`};

  ${({ height }) =>
    height &&
    `
		height: ${height}px;
	`};

  ${({ border }) =>
    border &&
    `
		border: ${border};
	`};

  margin: ${({ margin }) =>
    margin && `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};

  ${({ uppercase }) =>
    uppercase &&
    `
		text-transform: uppercase;
	`}

  ${({ fontSize }) =>
    fontSize &&
    `
			font-size: ${fontSize}px;
		`}

	span {
    font-family: ${({ theme }) => theme.fonts.primary}, sans-serif;
    font-weight: 400;

    ${({ fontWeight }) =>
      fontWeight &&
      `
			font-weight: ${fontWeight};
		`}
  }
`;

// for switch buttons, we want to overwrite active state if overwrite color exists otherwise use default
const generateSwitchBackground = (
  switchActive: boolean | undefined,
  switchActiveColorOverwrite: SwitchActiveColorOverwrite | undefined,
  theme: ThemeInterface
) => {
  if (switchActive) {
    return switchActiveColorOverwrite
      ? generateSwitchOverwriteColor(
          theme,
          switchActiveColorOverwrite,
          'normal'
        )
      : theme.colors.neutral[900];
  }
  return theme.colors.neutral[0];
};

// const generateSwitchBorder => () => {

// }

const generateSwitchColor = (
  switchActive: boolean | undefined,
  switchActiveColorOverwrite: string | undefined,
  theme: ThemeInterface
) =>
  switchActive && !switchActiveColorOverwrite
    ? theme.colors.neutral[0]
    : theme.colors.neutral[700];

const generateSwitchOverwriteColor = (
  theme: ThemeInterface,
  color: SwitchActiveColorOverwrite,
  type: SwitchActiveColorOverwriteType
) => {
  const colors: {
    [index in SwitchActiveColorOverwrite]: {
      [index in SwitchActiveColorOverwriteType]: string;
    };
  } = {
    Blue: {
      normal: theme.colors.information[300],
      active: theme.colors.information[400],
      hover: theme.colors.information[200],
      border: theme.colors.information[400],
    },
    Green: {
      normal: theme.colors.secondary[400],
      active: theme.colors.secondary[500],
      hover: theme.colors.secondary[300],
      border: theme.colors.secondary[500],
    },
    Red: {
      normal: theme.colors.error[300],
      active: theme.colors.error[400],
      hover: theme.colors.error[200],
      border: theme.colors.error[400],
    },
    Orange: {
      normal: theme.colors.warning[400],
      active: theme.colors.warning[500],
      hover: theme.colors.warning[300],
      border: theme.colors.warning[500],
    },
  };
  return colors[color][type];
};

export const TitleWrapper = styled.span<{ togglesExpand?: boolean }>`
  ${({ togglesExpand, theme }) =>
    togglesExpand &&
    `
    &:after {
    content: '';
    width: 0;
    height: 100%;
    position: relative;
    border-left: 1px solid ${theme.colors.neutral[200]};
    top: 0;
    left: 10px; 
    }
  `}
`;

export const ExpandIconWrapper = styled.span`
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;

  svg {
    margin: 0;
  }
`;