import React from 'react';
import cn from 'classnames';
import { Text } from '@veeqo/ui';
import { IncludedFilter, Shared, ViewName } from '../../types';

import IncludedFilters from '../IncludedFilters';
import {
  Dropdown,
  Icon,
  Header,
  Field,
  Content,
  Bottom,
  Button,
  Info,
  SharingOptionsContainer,
  SharingOptions,
} from './styled';
import DefaultOption from './DefaultOption';

type SharingOptionsType = {
  key: 'personal' | 'company';
  label: 'Personal' | 'Company';
  value: Shared;
};

const sharingOptions: SharingOptionsType[] = [
  { key: 'personal', label: 'Personal', value: 'false' },
  { key: 'company', label: 'Company', value: 'true' },
];

type EditDropdownPropsType = {
  className: string;
  viewName: ViewName;
  includedFilters: IncludedFilter[];
  shouldShowDropdown: boolean;
  headerText: string;
  shared: Shared;
  isDefault: boolean;
  onChange: (value: string) => void;
  onCloseDropdown: () => void;
  onSave: (editable: boolean) => void;
  onDelete: () => void;
  onSharingOptionChange: (shared: Shared) => void;
  handleChangeIsDefault: (isDefault: boolean) => void;
};

const EditDropdown = ({
  className,
  viewName,
  includedFilters,
  headerText,
  onChange,
  shared,
  isDefault,
  shouldShowDropdown,
  onCloseDropdown,
  onSave,
  onDelete,
  onSharingOptionChange,
  handleChangeIsDefault,
}: EditDropdownPropsType) => (
  <Dropdown
    className={className}
    onClickAway={onCloseDropdown}
    shouldShowDropdown={shouldShowDropdown}
  >
    <Content>
      <Header
        className={cn({
          [`${className}-header`]: className,
        })}
      >
        <Text variant="headingLarge">
          {headerText}
        </Text>
        <Icon name="cross" onClick={onCloseDropdown} color="#959FA8" />
      </Header>
      <Info>
        <Text variant="subheadingMedium">
          Filter searches and how they are sorted will be saved as a new view in your list.
        </Text>
      </Info>
      <Field
        label="View name"
        placeholder="View name"
        value={viewName}
        onChange={onChange}
      />
      <IncludedFilters
        className={cn({
          [`${className}-included-filters`]: className,
        })}
        includedFilters={includedFilters}
      />
      <SharingOptionsContainer>
        <Text variant="inputLabel">Sharing options</Text>
        <SharingOptions
          className={cn({
            [`${className}-sharing-options`]: className,
          })}
          selected={shared}
          options={sharingOptions}
          onChange={(value) => onSharingOptionChange(value as Shared)}
        />
      </SharingOptionsContainer>
      <DefaultOption
        className={className}
        isDefault={isDefault}
        onChange={(state) => handleChangeIsDefault(state)}
      />
    </Content>
    <Bottom>
      <Button onClick={onDelete}>
        Delete view
      </Button>
      <Button variant="primary" onClick={() => onSave(true)}>
        Save changes
      </Button>
    </Bottom>
  </Dropdown>
);

export default EditDropdown;